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
More from markdown-viewer/skills
architecture
Create layered system architecture diagrams using HTML/CSS templates with color-coded tiers and grid layouts. Best for technology stacks, microservices topology, and multi-tier application design.
2.0Kuml
Create UML diagrams using PlantUML syntax. Best for software modeling — Class, Sequence, Activity, State Machine, Component, Use Case, and Deployment diagrams with concise text-based notation and auto-layout.
1.9Kinfographic
Create template-based infographics with space-separated key-value syntax (NOT YAML). Best for KPI dashboards, timelines, roadmaps, SWOT analysis, funnels, comparisons, and org charts with quick visual impact.
1.8Kcanvas
Create spatial diagrams with free-positioned nodes using JSON format. Best for concept maps, knowledge graphs, and planning boards requiring precise x/y coordinate control.
1.8Kgraphviz
Create directed/undirected graphs using DOT language with automatic layout. Best for dependency trees, call graphs, package hierarchies, and module relationships requiring fine-grained edge routing.
1.8Knetwork
Create network topology diagrams using PlantUML syntax with mxgraph device icons (Cisco, Citrix, etc.). Best for LAN/WAN layouts, datacenter interconnects, and physical/logical network design.
1.7K