skills.rest
Lingjie-wang
Lingjie-wangCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

mermaid-diagram

Generate Mermaid diagram code with CLI verification and rendered PNG output.

Updated Jul 9, 2026
Search Tags:#architecture#documentation#mermaid#flowchart#visualization#generate#diagram
One-click install
npx skills add https://github.com/Lingjie-wang/autoRL --skill mermaid-diagram-lingjie-wang
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mermaid-diagram
Source: https://github.com/Lingjie-wang/autoRL/tree/main/Auto-claude-code-research-in-sleep/skills/mermaid-diagram
Command: npx skills add https://github.com/Lingjie-wang/autoRL --skill mermaid-diagram-lingjie-wang

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @mermaid-js/mermaid-cli.

What problem does it solve? Writing Mermaid diagrams by hand often leads to syntax errors, wrong arrow directions, and unverified output that breaks when rendered. This Skill generates Mermaid code from natural-language requirements, saves it to files, verifies it with the Mermaid CLI, and visually reviews the rendered PNG before delivery. ## Core Features & Use Cases - 23 diagram types: Flowcharts, sequence diagrams, class diagrams, ER diagrams, Gantt charts, C4 architecture, Sankey, mindmaps, and more. - Mandatory verification loop: Renders diagrams with mmdc, inspects the PNG, scores quality against a strict checklist, and iterates up to 3 times until accepted. - Academic and math support: CVPR/NeurIPS styling guidelines and KaTeX math notation for formulas inside flowchart and sequence diagram labels. - Use Case: Ask for an ER diagram of your database schema and receive a verified .mmd source file, a Markdown preview, and a rendered PNG in the figures/ directory. ## Quick Start Generate a Mermaid sequence diagram showing the OAuth login flow between the client, auth server, and database.

Frequently Asked Questions about mermaid-diagram

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a Mermaid diagram from a text description?▼

Describe the diagram you need in plain language, including components and connections. The Skill selects the appropriate diagram type, writes the Mermaid code, saves .mmd and .md files to figures/, and renders a PNG for verification.

What diagram types does Mermaid support?▼

This Skill supports 23 types including flowcharts, sequence diagrams, class diagrams, ER diagrams, Gantt charts, state diagrams, mindmaps, C4 architecture, Sankey diagrams, Git graphs, and XY charts. The type is chosen automatically based on your description.

Can Mermaid diagrams include math formulas and LaTeX?▼

Yes, Mermaid v10.9.0+ renders KaTeX math inside flowchart and sequence diagram labels using $$ delimiters within quoted strings. This supports fractions, Greek letters, subscripts, matrices, and summations for academic diagrams.

How do I verify Mermaid syntax before using a diagram?▼

Run the Mermaid CLI with mmdc -i diagram.mmd -o diagram.png to render the file; syntax errors are reported during rendering. The Skill performs this verification automatically and retries fixes up to 3 times.

Why does my Mermaid diagram render with wrong arrow directions?▼

Wrong arrows usually come from inverted source-target ordering in edge definitions. The Skill's review step checks every arrow against requirements and treats any direction error as an automatic failure requiring correction.

Related Skills

Explore More Software Engineering Skills→
michaelkd01michaelkd01

mermaid-diagrams

Create Mermaid diagrams for software architectures and process flows.

Community
Advanced
ShiienShiien
7

paper-illustrate

Generate publication-ready diagrams as TikZ or SVG sources.

Community
Advanced
DevonSteeDevonStee
3

readme-architecture-sync

Scans Java/Kotlin files to synchronize README architecture sections with codebase components.

Community
Intermediate
chengzongcaichengzongcai
21

diagram-generator

Generate and render Mermaid, Graphviz DOT, PlantUML, and SVG diagrams from natural language or structured inputs.

Community
Intermediate