skills.rest
chhpt
chhptCOMMUNITY
Explore all skills by this author →
GitHub

mermaid

Write Mermaid flowcharts, sequence diagrams, and state diagrams that render without syntax errors.

Updated Aug 23, 2026
Search Tags:#documentation#mermaid#syntax#flowchart#visualization#sequence diagram#diagram
One-click install
npx skills add https://github.com/chhpt/skills --skill mermaid-chhpt
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mermaid
Source: https://github.com/chhpt/skills/tree/main/skills/mermaid
Command: npx skills add https://github.com/chhpt/skills --skill mermaid-chhpt

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Mermaid diagrams often look correct but fail at render time due to subtle syntax pitfalls like unquoted parentheses, special characters in edge labels, or Markdown formatting inside nodes. This Skill provides a checklist of the five most common Mermaid syntax traps so diagrams render correctly on the first attempt. ## Core Features & Use Cases - Edge Label Rules: Keep arrow labels as plain text, avoiding numbered lists, dashes, and parentheses that break parsing. - Node Text Escaping: Wrap node text containing parentheses in quotes and replace literal double quotes with " entities. - Formatting Guidance: Use HTML tags like <b> and <br> instead of Markdown syntax for bold text and line breaks inside nodes. - Use Case: When a user asks to draw a flowchart of a plugin architecture or a sequence diagram of a client-server handshake, apply these rules so the Mermaid code renders without errors in documentation, README files, or wikis. ## Quick Start Draw a Mermaid sequence diagram showing the login flow between the client, API gateway, and database, making sure it renders without syntax errors.

Frequently Asked Questions about mermaid

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

FAQPage Schema
How do I write Mermaid diagrams that render without errors?▼

Keep edge labels as plain text without lists or parentheses, quote node text containing parentheses, escape double quotes as &quot;, and use HTML tags like <b> and <br> instead of Markdown for formatting inside nodes.

Why does my Mermaid diagram fail to render?▼

Common causes include parentheses or brackets in edge labels, unquoted parentheses in node text being parsed as shape definitions, and raw double quotes inside node labels. Wrapping text in quotes and using plain-text labels resolves most failures.

Can I use Markdown formatting inside Mermaid nodes?▼

Markdown syntax like # headings, backtick code, and ** bold is unreliable or invalid inside Mermaid nodes. Use HTML tags such as <b>, <code>, and <br> instead for bold text, code styling, and line breaks.

How do I add a line break in a Mermaid node label?▼

Insert the HTML <br> tag inside a quoted node label, for example A["First line<br>Second line"]. Markdown line-break conventions do not work reliably in Mermaid node text.

Does Mermaid support HTML tags in sequence diagram messages?▼

No. Participant display names after 'as' and message text after the colon should be plain text. HTML tags like <b> or <code> in sequence diagrams are either rendered literally or cause compatibility errors.

Related Skills

Explore More Software Engineering Skills→
WellApp-aiWellApp-ai
341

bpmn-workflow

Generate BPMN 2.0 diagrams from feature specifications and link them to Gherkin scenarios.

Official
Advanced
dralkhdralkh
74

markdown-mermaid-writing

Standardize markdown documentation and Mermaid diagrams for GitHub-friendly technical content.

Community
Advanced
nimadorostkarnimadorostkar
25

diagrams

Generate Mermaid diagrams as code for version-controlled documentation.

Community
Intermediate
LucasBiasonLucasBiason

diagram-generation

Generate technical diagrams from textual descriptions in Mermaid, PlantUML, and Draw.io formats.

Community
Intermediate