generate-mermaid-flowchart

name	generate-mermaid-flowchart
description	Use when rendering Mermaid syntax into diagram image files for docs or articles (mermaid, flowchart, diagram, PNG, SVG, visualization).
argument-hint	Mermaid code or description of the diagram to generate, e.g.: delivery lifecycle flowchart, service architecture diagram
user-invocable	true

Generate Mermaid Flowchart

Render Mermaid diagrams into PNG or SVG images using the local Mermaid CLI (mmdc).

When to Use

• The task needs a visual flowchart, sequence diagram, class diagram, or other Mermaid-supported diagram.
• A markdown document or article needs embedded diagram images instead of raw Mermaid code blocks.
• Diagrams need to be exported as standalone PNG or SVG files for use in platforms that do not render Mermaid natively (e.g., WeChat articles, PDF exports).

When Not to Use

• The target platform natively renders Mermaid (e.g., GitHub markdown) — use inline Mermaid code blocks instead.
• The diagram needs rich custom styling, icons, or brand visuals — use generate-ai-image instead.
• The task is unrelated to diagramming.

Prerequisites

• Node.js installed.
• @mermaid-js/mermaid-cli installed globally: npm install -g @mermaid-js/mermaid-cli.

Procedure

1. Define the diagram. Write or receive the Mermaid syntax. If the user provides a description instead of code, draft the Mermaid code first. Use <br/> for line breaks inside node labels (not \n).

2. Save the Mermaid source. Write the Mermaid code to a .mmd file in the target output directory (e.g., assets/diagrams/).

3. Render the image. Run the appropriate script:

   • Windows: .github/skills/generate-mermaid-flowchart/scripts/render-mermaid.ps1 -InputFile <path.mmd> -OutputFile <path.png> -Format png
   • Linux/macOS: .github/skills/generate-mermaid-flowchart/scripts/render-mermaid.sh <path.mmd> <path.png> png

4. Verify the output. Confirm the output image file exists and is non-empty.

5. Update references. Replace inline Mermaid code blocks or text-art diagrams in the target document with ![description](relative/path/to/image.png).

Script Reference

Script	Platform	Purpose
scripts/render-mermaid.ps1	Windows (PowerShell)	Render .mmd to PNG/SVG via mmdc
scripts/render-mermaid.sh	Linux / macOS (Bash)	Render .mmd to PNG/SVG via mmdc

Parameters

Parameter	Required	Default	Description
InputFile	Yes	—	Path to .mmd file containing Mermaid syntax
OutputFile	No	<InputFile basename>.<format>	Output image file path
Format	No	png	Output format: png or svg

Output Guidance

• Place generated images under assets/diagrams/ or alongside the document using them.
• Keep the .mmd source file next to the output image for future regeneration.
• Use descriptive filenames: delivery-lifecycle.mmd, service-architecture.mmd.
• Prefer SVG for web and documentation; prefer PNG for platforms that do not support SVG (e.g., WeChat).

Supported Diagram Types

• flowchart / graph — process flows, decision trees, lifecycle diagrams
• sequenceDiagram — API call sequences, interaction flows
• classDiagram — entity relationships, data models
• stateDiagram — state machines
• erDiagram — database entity relationships
• gantt — timeline and scheduling
• pie — proportional data
• mindmap — concept maps