create-mermaid-visualization

Generate validated Mermaid diagrams across 30+ diagram types from descriptions or source material.

11|1|Updated Jul 25, 2025

Search Tags:#architecture #documentation #markdown #mermaid #flowchart #visualization #diagram

Ready to run

npx skills add https://github.com/tomzx/agents --skill create-mermaid-visualization-tomzx

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: create-mermaid-visualization
Source: https://github.com/tomzx/agents/tree/main/skills/create-mermaid-visualization
Command: npx skills add https://github.com/tomzx/agents --skill create-mermaid-visualization-tomzx

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @mermaid-js/mermaid-cli, and includes references (resource) components.

What problem does it solve? Writing Mermaid diagrams by hand often leads to syntax errors, wrong diagram-type choices, and diagrams that fail to render on platforms like GitHub. This Skill selects the correct diagram type for your intent, writes syntactically correct Mermaid using family-specific references, and validates the output before delivery. ## Core Features & Use Cases - Diagram Type Selection: Matches your intent to the right type from a catalog of 30+ Mermaid diagram families, including flowchart, sequence, class, state, ER, C4, gantt, mindmap, sankey, and more. - Syntax Validation: Validates diagrams with the Mermaid CLI (`mmdc`) before delivery, and flags rendering limits for beta diagram types on GitHub. - Flexible Delivery: Outputs diagrams inline as fenced Markdown blocks or as `.mmd` files with exported `.svg`/`.png` images for targets that cannot render Mermaid. - Use Case: You need to document a database schema in a GitHub README. Describe the tables and relationships, and the Skill produces a validated `erDiagram` with correct crow's foot cardinality notation, ready to paste into Markdown. ## Quick Start Ask the agent to create a Mermaid sequence diagram showing the login flow between a user, an API, and a database.

Frequently Asked Questions about create-mermaid-visualization

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

FAQPage Schema

How do I create a Mermaid diagram from a text description?▼

Describe what the diagram should show, such as a process, structure, or data flow, and the Skill selects the matching Mermaid diagram type, writes the syntax using family-specific references, validates it with mmdc, and delivers a fenced mermaid Markdown block.

Which Mermaid diagram types render on GitHub?▼

Stable types like flowchart, sequenceDiagram, classDiagram, stateDiagram-v2, erDiagram, gantt, journey, pie, and requirementDiagram render on GitHub. Types marked beta, such as architecture-beta, sankey-beta, and xychart-beta, do not render there and should be exported as SVG or PNG.

How do I validate Mermaid diagram syntax before publishing?▼

Run the Mermaid CLI with mmdc -i diagram.mmd -o output.svg; an exit code of 0 means the syntax parses. If mmdc is unavailable, use npx -y @mermaid-js/mermaid-cli or review the diagram line by line against the family reference.

Why does my Mermaid diagram fail to parse?▼

Parse errors usually come from unquoted special characters in labels, misspelled keywords, or missing -beta and -v2 suffixes. Wrap labels containing braces, brackets, pipes, or quotes in double quotes, and use stateDiagram-v2 instead of the legacy stateDiagram keyword.

Can Mermaid diagrams be exported as images for Confluence or Word?▼

Yes, targets that cannot render Mermaid, such as Confluence, Word, PDF, or plain web pages, can receive the diagram as a .mmd source file plus an exported .svg or .png image generated through the mmdc CLI.