mermaid-diagrams

Create Mermaid diagrams in markdown with syntax rules that render correctly on GitHub.

5|Updated Nov 9, 2025
One-click install
npx skills add https://github.com/britt/agent-skills --skill mermaid-diagrams-britt
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mermaid-diagrams
Source: https://github.com/britt/agent-skills/tree/main/skills/mermaid-diagrams
Command: npx skills add https://github.com/britt/agent-skills --skill mermaid-diagrams-britt

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Mermaid diagrams frequently fail to render on GitHub due to subtle syntax errors like parentheses inside labels or mismatched brackets, leaving broken code blocks in documentation. This Skill provides the exact syntax rules and per-type examples needed to produce diagrams that render correctly the first time. ## Core Features & Use Cases - GitHub-Safe Syntax Rules: Enforces the two rules that most often break GitHub rendering: never use parentheses inside labels, and always match opening and closing brackets on node shapes. - Per-Type Diagram Examples: Covers flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, Gantt charts, and git graphs with copy-ready syntax. - Syntax Reference: Documents node shapes, arrow types, and styling directives for quick lookup. - Use Case: While writing a design document, you need a decision flow for request handling. Use this Skill to generate a flowchart with correct bracket matching and label formatting so it renders immediately in your GitHub pull request. ## Quick Start Create a Mermaid flowchart showing the request authentication flow that will render correctly on GitHub.

Frequently Asked Questions about mermaid-diagrams

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

FAQPage Schema
How do I create a Mermaid flowchart in markdown?▼

Start a code block with the mermaid language tag, declare flowchart TD or LR, then define nodes with bracketed labels connected by arrows like A[Start] --> B{Decision}. Keep labels free of parentheses and match each node's opening and closing brackets.

Why does my Mermaid diagram fail to render on GitHub?▼

The two most common causes are parentheses inside a label and mismatched brackets on a node shape, such as opening with { and closing with ]. Replace parentheses with dashes and ensure every label uses matching bracket pairs.

What diagram types does Mermaid support?▼

Mermaid supports flowcharts, sequence diagrams, class diagrams, state diagrams, entity relationship diagrams, Gantt charts, and git graphs. Each type has its own declaration keyword and syntax conventions documented in the reference examples.

Does GitHub render Mermaid diagrams automatically?▼

Yes, GitHub and GitLab automatically render Mermaid code blocks in markdown files, issues, and pull requests. The diagram must use valid syntax, since rendering errors appear as broken code blocks rather than fallback images.

How do I style nodes in a Mermaid flowchart?▼

Use the style directive followed by the node id and CSS-like properties, for example style B fill:#f96,stroke:#333,stroke-width:4px. Apply styling after all nodes and edges are defined in the diagram.