How to Automate Generation of SPEC 0 Gannt Chart #372
Description
Once PHEP 3 gets adopted, we'll want to create a webpage that displays the "Support Window" Gantt chart (like they do on the official SPEC 0 page. To keep it up-to-date without manual intervention, we have a few options (according to Claude Code):
There are several ways to automate generating the chart image. Here are the best options for your use case:
Option 1: Use Mermaid CLI (Best for GitHub Actions)
The official @mermaid-js/mermaid-cli tool can convert Mermaid markdown to SVG/PNG from the command line:
Install it:
npm install -g @mermaid-js/mermaid-cliAdd to your Python script:
import subprocess
# At the end of your script, after saving chart.md:
print("Generating SVG from Mermaid chart...")
subprocess.run(["mmdc", "-i", "chart.md", "-o", "chart.svg"], check=True)
print("Chart saved to chart.svg")For GitHub Actions workflow:
name: Update Gantt Chart
on:
schedule:
- cron: '0 0 * * *' # Run daily at midnight
workflow_dispatch:
jobs:
update-chart:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Setup Python
uses: actions/setup-python@v4
with:
python-version: '3.11'
- name: Install Python dependencies
run: |
pip install requests pandas packaging
- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: '18'
- name: Install Mermaid CLI
run: npm install -g @mermaid-js/mermaid-cli
- name: Generate chart
run: |
python generate_chart.py
mmdc -i chart.md -o chart.svg
- name: Commit and push if changed
run: |
git config --local user.email "action@github.com"
git config --local user.name "GitHub Action"
git add chart.svg chart.md schedule.md
git diff --quiet && git diff --staged --quiet || (git commit -m "Update SPEC 0 support chart" && git push)Option 2: Client-Side Rendering (Simpler!)
If your webpage is static HTML, you can skip image generation entirely and render Mermaid diagrams directly in the browser:
Update your Python script to generate HTML:
# After writing chart.md, also generate an HTML file:
with open("chart.md", "r") as f:
mermaid_code = f.read()
html_content = f"""<!DOCTYPE html>
<html>
<head>
<title>SPEC 0 Support Window</title>
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize({{ startOnLoad: true }});
</script>
</head>
<body>
<h1>SPEC 0 Support Window</h1>
<pre class="mermaid">
{mermaid_code}
</pre>
</body>
</html>
"""
with open("chart.html", "w") as f:
f.write(html_content)This way, the chart is always up-to-date and you don't need to generate images at all!
Option 3: Python-Only Solution
If you prefer staying in Python, you can use playwright to render the chart:
from playwright.sync_api import sync_playwright
def render_mermaid_to_svg(mermaid_code, output_path):
with sync_playwright() as p:
browser = p.chromium.launch()
page = browser.new_page()
html = f"""
<!DOCTYPE html>
<html>
<head>
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize({{ startOnLoad: true }});
</script>
</head>
<body>
<pre class="mermaid">{mermaid_code}</pre>
</body>
</html>
"""
page.set_content(html)
page.wait_for_timeout(2000) # Wait for rendering
# Get the SVG element and save it
svg_element = page.locator('svg').first
svg_content = svg_element.evaluate('el => el.outerHTML')
with open(output_path, 'w') as f:
f.write(svg_content)
browser.close()
# Use it:
with open("chart.md", "r") as f:
mermaid_code = f.read()
render_mermaid_to_svg(mermaid_code, "chart.svg")I'd recommend Option 1 (Mermaid CLI) or Option 2 (client-side rendering) as they're the most reliable and commonly used approaches. Option 1 gives you a static SVG file, while Option 2 is simpler with no build step required.