mermaid-diagram
Generate Mermaid diagrams from user requirements. Saves .mmd and .md files to figures/ directory with syntax verification. Supports flowcharts, sequence diagrams, class diagrams, ER diagrams, Gantt charts, and 18 more diagram types.
Profile →npx skills add brycewang-stanford/Auto-Empirical-Research-Skills --skill mermaid-diagram --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Mermaid Diagram Generator Generate high-quality Mermaid diagram code based on user requirements, with file output and verification. ## Constants - **OUTPUT_DIR = `figures/`** — Output directory for all generated files - **MAX_ITERATIONS = 3** — Maximum refinement rounds for syntax errors ## Workflow: MUST EXECUTE ALL STEPS ### Step 0: Pre-flight Check ```bash # Create output directory mkdir -p figures ``` ### Step 1: Understand Requirements & Select Diagram Type Parse the input: **$ARGUMENTS** 1. Analyze user description to determine the most suitable diagram type 2. Read the corresponding syntax reference documentation (see Diagram Type Reference below) 3. **If the diagram involves mathematical notation** (formulas, equations, Greek letters, subscripts, superscripts, fractions, matrices, etc.), apply the math syntax rules from the **Math Formulas in Diagrams** section below 4. Identify all components, connections, and data flow 5. Plan the diagram structure ### Step 2: Read Documentation Select the appropriate diagram type based on the use case. Use your built-in knowledge of Mermaid syntax, or fetch up-to-date docs via the context7 MCP server if needed. | Type | Use Cases | | -
- Constants
- Workflow: MUST EXECUTE ALL STEPS
- Step 0: Pre-flight Check
- Step 1: Understand Requirements & Select Diagram Type
- Step 2: Read Documentation
- Configuration & Themes
- Step 3: Generate Mermaid Code & Save Files
- Step 4: Verify Mermaid Syntax (MANDATORY)
- Step 5: Claude STRICT Visual Review & Scoring (MANDATORY)
- Step 6: Final Output Summary
- Architecture Diagram Best Practices
- Use Junctions for Layout Control
- Use Edges out of Groups for Floating Components
- CVPR/ICLR/NeurIPS Style Guide (for Academic Diagrams)
Create output directory mkdir -p figures Check if mermaid-cli is available if command -v mmdc &> /dev/null; then mmdc -i figures/<diagram-name>.mmd -o figures/<diagram-name>.png -b transparent echo "✅ Syntax valid — PNG rendered to figures/<diagram-name>.png" else npx -y @mermaid-js/mermaid-cli@latest -i figures/<diagram-name>.mmd -o figures/<diagram-name>.png -b transparent fi
What does the mermaid-diagram skill do?
Generate Mermaid diagrams from user requirements. Saves .mmd and .md files to figures/ directory with syntax verification. Supports flowcharts, sequence diagrams, class diagrams, ER diagrams, Gantt charts, and 18 more diagram types.
How do I install it?
Run `npx skills add brycewang-stanford/Auto-Empirical-Research-Skills --skill mermaid-diagram --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From brycewang-stanford/Auto-Empirical-Research-Skills, a repository with 3,244 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.