mermaid-diagram

Generate Mermaid diagram code with Chinese label compatibility and platform version guidance.

Updated Aug 22, 2026
One-click install
npx skills add https://github.com/JustinChangTW/ai-skills-core --skill mermaid-diagram-justinchangtw
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mermaid-diagram
Source: https://github.com/JustinChangTW/ai-skills-core/tree/main/skills/07-presentations-visual/mermaid-diagram
Command: npx skills add https://github.com/JustinChangTW/ai-skills-core --skill mermaid-diagram-justinchangtw

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Writing Mermaid diagrams by hand often fails due to reserved words, special characters, Chinese punctuation, and platform version differences. This Skill selects the right diagram type for your need and produces Mermaid code that actually renders, with quoting, escaping, and compatibility rules applied. ## Core Features & Use Cases - Diagram type selection: Chooses among flowchart, sequenceDiagram, stateDiagram, classDiagram, erDiagram, gantt, mindmap, timeline, quadrantChart, kanban, and architecture-beta based on your actual requirement instead of defaulting to flowchart. - Chinese and special-character safety: Applies quoting, escaping, ID/label separation, and reserved-word avoidance so labels with parentheses, colons, or CJK punctuation parse correctly. - Platform compatibility diagnosis: Identifies whether a render failure comes from syntax, Mermaid version limits (v9/v10/v11), or platform support gaps in GitHub, Obsidian, VS Code, or Claude Artifacts. - Use Case: Ask to turn a login API interaction into a sequence diagram with Chinese participant names, and receive paste-ready Mermaid code plus notes on which platforms support it. ## Quick Start Ask the assistant to turn your process, architecture, or timeline description into a Mermaid diagram and mention your target platform such as GitHub or Obsidian.

Frequently Asked Questions about mermaid-diagram

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

FAQPage Schema
How do I create a Mermaid flowchart with Chinese labels?▼

Write Chinese text inside double-quoted node labels, such as A["開始流程"], and keep node IDs in English or numbers. Quoting prevents parse errors when labels contain parentheses, colons, or CJK punctuation.

Which Mermaid diagram type should I use for my use case?▼

Use flowchart for processes, sequenceDiagram for API interactions, erDiagram for database schemas, gantt for schedules, stateDiagram-v2 for state machines, and mindmap for concept maps. The Skill includes a decision guide mapping common requirements to the right type.

Why does my Mermaid diagram fail to render in Obsidian or GitHub?▼

Failures usually come from unquoted special characters, reserved words used as node IDs, or a diagram type requiring a newer Mermaid version than the platform ships. Types like kanban and architecture-beta need v11+, which Obsidian and GitHub often lack.

How do I fix Mermaid parse errors with parentheses or colons?▼

Wrap the entire label in double quotes, for example A["用戶(User)"], or use Mermaid escape codes like #40; and #58;. Separating the node ID from its display label is the most robust fix.

Can Mermaid erDiagram use Chinese field names?▼

No, erDiagram field names must be in English or the parser fails. Use English column names and attach Chinese descriptions as quoted comments, such as int id PK "主鍵".

When should I not use Mermaid for a diagram?▼

Avoid Mermaid when the deliverable is a slide deck, a UI design, or a polished marketing graphic, since it produces code-rendered schematic diagrams only. Also avoid newest diagram types when targeting platforms stuck on older Mermaid versions.