القائمة
Render Mermaid diagrams as PNG, SVG, or PDF images using the Mermaid CLI (mmdc).
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| name | mermaid-render |
| description | Render Mermaid diagrams as PNG, SVG, or PDF images using the Mermaid CLI (mmdc). |
Render Mermaid chart syntax into PNG, SVG, or PDF images using the Mermaid CLI (mmdc).
python3 /path/to/mermaid-render/render.py "mermaid code" output.png
npm install -g @mermaid-js/mermaid-cli
echo '{"args": ["--no-sandbox", "--disable-setuid-sandbox"]}' > ~/.puppeteer.json
python3 render.py "flowchart TD A[Start] --> B[End]" output.png
| Position | Parameter | Description | Default |
|---|---|---|---|
| 1 | Mermaid code | The Mermaid diagram code (required) | - |
| 2 | Output path | Output file path | /tmp/mermaid.png |
| 3 | Format | Output format: png, svg, pdf | png |
| 4 | Background | Background color | white |
| 5 | Scale | Scale factor (integer) | 2 |
python3 render.py "flowchart TD
A[User] --> B[AI]
B --> C[Response]" flowchart.png
python3 render.py "sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!" sequence.png
python3 render.py "classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal: +int age
Animal: +eat()" class.png
python3 render.py "gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2024-01-01, 30d" gantt.png
from render import render_mermaid
# Basic usage
output_path = render_mermaid(
mermaid_code="flowchart TD A --> B",
output_path="/tmp/diagram.png",
output_format="png",
background="white",
scale=2
)
print(f"Diagram saved to: {output_path}")
flowchart, graph)sequenceDiagram)classDiagram)stateDiagram, stateDiagram-v2)erDiagram)journey)gantt)pie)requirementDiagram)gitGraph)C4Context, C4Container, etc.)mindmap)timeline)quadrantChart)xychart)block)For advanced puppeteer configuration, edit ~/.puppeteer.json:
{
"args": ["--no-sandbox", "--disable-setuid-sandbox"],
"headless": true,
"executablePath": "/usr/bin/chromium-browser"
}
You can customize the appearance using Mermaid themes:
%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000' }}}%%
flowchart TD
A --> B
# Verify installation
which mmdc
# Reinstall if needed
npm install -g @mermaid-js/mermaid-cli
# Install Chrome dependencies (Ubuntu/Debian)
sudo apt-get install -y chromium-browser
# Or install puppeteer with bundled Chrome
npm install puppeteer
# Create puppeteer config for root user
echo '{"args": ["--no-sandbox", "--disable-setuid-sandbox"]}' > ~/.puppeteer.json
| Format | MIME Type | Use Case |
|---|---|---|
| PNG | image/png | Web, presentations, documents |
| SVG | image/svg+xml | Scalable graphics, web |
| application/pdf | Print, documents |
\n in command linetransparent as background color for PNG/SVG