mermaid
Mermaid Diagram Visualizer
Quick Start: Identify diagram type (flowchart/sequence/state/class/ER/gantt/mindmap) → Define nodes with shapes → Connect with arrows → Wrap in ```mermaid fence. Default: top-to-bottom (TD), use flowchart over graph, Unicode supported.
Critical Syntax Rules
Rule 1: List Syntax Conflicts
❌ [1. Item] → "Unsupported markdown: list"
✅ [1.Item] → Remove space after period
✅ [① Item] → Use circled numbers ①②③④⑤⑥⑦⑧⑨⑩
✅ [(1) Item] → Use parentheses
Rule 2: Subgraph Naming
❌ subgraph AI Agent Core → Space without quotes
More from larchliu/md2x
md2x
Convert Markdown files to PDF, DOCX, HTML, or full-page images (png/jpg/webp). Use `npx md2x <input.md> -f <docx|pdf|html|png|jpg|jpeg|webp> [options]`.
12vega
Create data-driven charts with Vega-Lite (simple) and Vega (advanced). Best for bar, line, scatter, heatmap, area charts, and multi-series analytics. Use when you have numeric data arrays needing statistical visualization. Vega for radar charts and word clouds. NOT for process diagrams (use mermaid) or quick KPI cards (use infographic).
5canvas
Create spatial node-based diagrams with free positioning. Best for mind maps, knowledge graphs, concept maps, and planning boards where precise spatial layout matters. Use JSON format with x/y coordinates. NOT for sequential flows (use mermaid) or data charts (use vega).
5graphviz
Create complex directed/undirected graphs with precise layout control. Best for dependency trees, org charts, network topologies, and module relationships. Use when you need fine-grained edge routing or hierarchical layouts with many levels. NOT for simple flowcharts (use mermaid) or data charts (use vega).
5infographic
Create beautiful infographics with pre-designed templates. Best for KPI cards, timelines, roadmaps, step-by-step processes, A vs B comparisons, SWOT analysis, funnels, org trees, pie/bar charts. Use when you need quick visual impact with 4-8 items. Simple YAML-like syntax. NOT for complex data analysis (use vega) or technical flowcharts (use mermaid).
5