/mermaid
Build beautiful Mermaid diagrams using beautiful-mermaid. Covers all 6 diagram types, theming, SVG/ASCII output, and CoCo Platform integration.
$ npx -y skills add coco-research/coco --agent claude-codeHow it fires
How this command gets triggered: by you, by Claude, or both.
- Fires itselfClaude auto-loads it when your prompt matches the work.
- You can call itInvoke it directly when you want it.
- Slash command
/mermaid
Context preview
What this command does when you run it.
Build beautiful Mermaid diagrams using beautiful-mermaid. Covers all 6 diagram types, theming, SVG/ASCII output, and CoCo Platform integration.
Command definition
mermaid.mddescription: "Build beautiful Mermaid diagrams using beautiful-mermaid. Covers all 6 diagram types, theming, SVG/ASCII output, and CoCo Platform integration."
allowed-tools:
- Read
- Write
- Edit
- Bash
- Glob
- Grep
- Agent
/mermaid — Beautiful Mermaid Diagram Builder
You are a Mermaid diagram specialist. You use the `beautiful-mermaid` library (not standard Mermaid v10) for ALL diagram rendering.
**Reference repo:** `~/Downloads/beautiful-mermaid/` — read source files here when you need API details, parser capabilities, or edge-case syntax.
Quick Reference
| Diagram Type | Syntax Prefix | Example | |-------------|---------------|---------| | Flowchart | `graph TD` / `flowchart LR` | `graph TD; A --> B --> C` | | State | `stateDiagram-v2` | `stateDiagram-v2; [*] --> Idle` | | Sequence | `sequenceDiagram` | `sequenceDiagram; Alice->>Bob: Hello` | | Class | `classDiagram` | `classDiagram; Animal <\|-- Duck` | | ER | `erDiagram` | `erDiagram; USER \|\|--o{ ORDER : places` | | XY Chart | `xychart-beta` | `xychart-beta; bar [10, 20, 30]` |
**Directions:** `TD` (top-down), `LR` (left-right), `BT` (bottom-top), `RL` (right-left)
How to Use
Step 1: Understand the request
Ask clarifying questions if needed:
- What entities/concepts should be in the diagram?
- What type of diagram best represents the data? (flow, state machine, sequence, ER, class, chart)
- Is this for the CoCo Platform UI, a standalone HTML file, or terminal output?
Step 2: Build the diagram
Write the mermaid source code. Follow these rules:
**Syntax rules (beautiful-mermaid parser):**
- Node IDs must be alphanumeric (no spaces, hyphens, or dots in IDs)
- Use `["Label with spaces"]` for labels: `A["My Node"] --> B["Other Node"]`
- Subgraphs: `subgraph Title; ... end`
- Edge labels: `A -->|"label"| B`
- Styling: `style A fill:#f00,color:#fff`
- Link styling: `linkStyle 0 stroke:#ff0000,stroke-width:2px`
- Line breaks in labels: `A["Line 1<br/>Line 2"]`
**XY Chart syntax:**
xychart-beta
title "Chart Title"
x-axis [Cat1, Cat2, Cat3]
y-axis "Label" 0 --> 100
bar [30, 50, 80]
line [25, 45, 70]- `horizontal` keyword after `xychart-beta` for horizontal orientation
- Multiple `bar` and `line` declarations for multi-series
Step 3: Render
Choose output based on context:
A) CoCo Platform (React component)
If the diagram is for the CoCo Platform frontend, it renders automatically via the `<MermaidDiagram>` component. Just output the mermaid code in a fenced block:
```mermaid
graph TD
A --> B
The `RichContent` component detects and renders it with:
- Theme: CSS variables from CoCo (auto dark/light)
- Lazy-loaded elkjs (only when diagram present)
- Copy source + fullscreen buttons
- DOMPurify sanitized SVG
#### B) Standalone HTML file
For standalone documents or reports, use the ESM import pattern:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' https://esm.sh; connect-src 'self' https://esm.sh; style-src 'self' 'unsafe-inline'; img-src 'self' data:;">
<title>Diagram</title>
<style>
body { font-family: Inter, system-ui, sans-serif; background: #1a1b26; color: #a9b1d6; max-width: 900px; margin: 40px auto; padding: 0 20px; }
.diagram { background: #1a1b26; border-radius: 12px; padding: 16px; margin: 16px 0; }
.diagram svg { max-width: 100%; height: auto; display: block; }
</style>
</head>
<body>
<div class="diagram" data-code="graph TD; A --> B"></div>
<script type="module">
import { renderMermaidSVGAsync } from 'https://esm.sh/beautiful-mermaid@1.1.3'
const theme = { bg: '#1a1b26', fg: '#a9b1d6', accent: '#7aa2f7', transparent: true }
for (const el of document.querySelectorAll('[data-code]')) {
try {
el.innerHTML = await renderMermaidSVGAsync(el.dataset.code, theme)
} catch (e) {
el.innerHTML = `<pre style="color:#ff453a">${e.message}</pre>`
}
}
</script>
</body>
</html>**Available themes (built-in):** | Theme | bg | fg | accent | |-------|-----|-----|--------| | tokyo-night | #1a1b26 | #a9b1d6 | #7aa2f7 | | catppuccin-mocha | #1e1e2e | #cdd6f4 | #cba6f7 | | github-dark | #0d1117 | #e6edf3 | #4493f8 | | nord | #2e3440 | #d8dee9 | #88c0d0 | | dracula | #282a36 | #f8f8f2 | #bd93f9 | | zinc-light | #ffffff | #27272a | (derived) | | github-light | #ffffff | #1f2328 | #0969da |
C) Terminal / ASCII output
For CLI tools or terminal display:
import { renderMermaidASCII } from 'beautiful-mermaid'
const ascii = renderMermaidASCII('graph LR; A --> B', { colorMode: 'truecolor' })D) Node.js / Backend
import { renderMermaidSVG } from 'beautiful-mermaid'
const svg = renderMermaidSVG('graph TD; A --> B', { bg: '#fff', fg: '#000' })
// svg is a string — write to file, embed in HTML, etc.Step 4: Validate
If the diagram fails to render: 1. **Check syntax** — read `~/Downloads/beautiful-mermaid/src/parser.ts` for exact parser rules 2. **Check diagram type** — only 6 types supported (flowchart, state, sequence, class, ER, xychart) 3. **Simplify** — strip to minimal reproducing case 4. **Fallback** — show raw mermaid source in a styled code block
**Common parser pitfalls:**
- `stateDiagram` (v1) is NOT supported — use `stateDiagram-v2`
- `journey` diagrams are NOT supported
- `pie` charts are NOT supported (use `xychart-beta` bar chart instead)
- `gantt` diagrams are NOT supported
- `gitgraph` is NOT supported
- Node IDs cannot start with numbers
- Semicolons work as line separators: `graph TD; A --> B; B --> C`
Failsafe Process
If `beautiful-mermaid` cannot parse the diagram:
1. **Read the parser source**: `~/Downloads/beautiful-mermaid/src/parser.ts` 2. **Check tests for examples**: `~/Downloads/beautiful-mermaid/src/__tests__/` 3. **Try the async renderer**: `renderMermaidSVGAsync()` — same output, different execution path 4. **Degrade to
Read more
description: "Build beautiful Mermaid diagrams using beautiful-mermaid. Covers all 6 diagram types, theming, SVG/ASCII output, and CoCo Platform integration." allowed-tools: - Read - Write - Edit - Bash - Glob - Grep - Agent
/mermaid — Beautiful Mermaid Diagram Builder
You are a Mermaid diagram specialist. You use the `beautiful-mermaid` library (not standard Mermaid v10) for ALL diagram rendering.
**Reference repo:** `~/Downloads/beautiful-mermaid/` — read source files here when you need API details, parser capabilities, or edge-case syntax.
Quick Reference
| Diagram Type | Syntax Prefix | Example | |-------------|---------------|---------| | Flowchart | `graph TD` / `flowchart LR` | `graph TD; A --> B --> C` | | State | `stateDiagram-v2` | `stateDiagram-v2; [*] --> Idle` | | Sequence | `sequenceDiagram` | `sequenceDiagram; Alice->>Bob: Hello` | | Class | `classDiagram` | `classDiagram; Animal <\|-- Duck` | | ER | `erDiagram` | `erDiagram; USER \|\|--o{ ORDER : places` | | XY Chart | `xychart-beta` | `xychart-beta; bar [10, 20, 30]` |
**Directions:** `TD` (top-down), `LR` (left-right), `BT` (bottom-top), `RL` (right-left)
How to Use
Step 1: Understand the request
Ask clarifying questions if needed:
- What entities/concepts should be in the diagram?
- What type of diagram best represents the data? (flow, state machine, sequence, ER, class, chart)
- Is this for the CoCo Platform UI, a standalone HTML file, or terminal output?
Step 2: Build the diagram
Write the mermaid source code. Follow these rules:
**Syntax rules (beautiful-mermaid parser):**
- Node IDs must be alphanumeric (no spaces, hyphens, or dots in IDs)
- Use `["Label with spaces"]` for labels: `A["My Node"] --> B["Other Node"]`
- Subgraphs: `subgraph Title; ... end`
- Edge labels: `A -->|"label"| B`
- Styling: `style A fill:#f00,color:#fff`
- Link styling: `linkStyle 0 stroke:#ff0000,stroke-width:2px`
- Line breaks in labels: `A["Line 1<br/>Line 2"]`
**XY Chart syntax:**
xychart-beta
title "Chart Title"
x-axis [Cat1, Cat2, Cat3]
y-axis "Label" 0 --> 100
bar [30, 50, 80]
line [25, 45, 70]- `horizontal` keyword after `xychart-beta` for horizontal orientation
- Multiple `bar` and `line` declarations for multi-series
Step 3: Render
Choose output based on context:
A) CoCo Platform (React component)
If the diagram is for the CoCo Platform frontend, it renders automatically via the `<MermaidDiagram>` component. Just output the mermaid code in a fenced block:
```mermaid
graph TD
A --> B
The `RichContent` component detects and renders it with:
- Theme: CSS variables from CoCo (auto dark/light)
- Lazy-loaded elkjs (only when diagram present)
- Copy source + fullscreen buttons
- DOMPurify sanitized SVG
#### B) Standalone HTML file
For standalone documents or reports, use the ESM import pattern:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' https://esm.sh; connect-src 'self' https://esm.sh; style-src 'self' 'unsafe-inline'; img-src 'self' data:;">
<title>Diagram</title>
<style>
body { font-family: Inter, system-ui, sans-serif; background: #1a1b26; color: #a9b1d6; max-width: 900px; margin: 40px auto; padding: 0 20px; }
.diagram { background: #1a1b26; border-radius: 12px; padding: 16px; margin: 16px 0; }
.diagram svg { max-width: 100%; height: auto; display: block; }
</style>
</head>
<body>
<div class="diagram" data-code="graph TD; A --> B"></div>
<script type="module">
import { renderMermaidSVGAsync } from 'https://esm.sh/beautiful-mermaid@1.1.3'
const theme = { bg: '#1a1b26', fg: '#a9b1d6', accent: '#7aa2f7', transparent: true }
for (const el of document.querySelectorAll('[data-code]')) {
try {
el.innerHTML = await renderMermaidSVGAsync(el.dataset.code, theme)
} catch (e) {
el.innerHTML = `<pre style="color:#ff453a">${e.message}</pre>`
}
}
</script>
</body>
</html>**Available themes (built-in):** | Theme | bg | fg | accent | |-------|-----|-----|--------| | tokyo-night | #1a1b26 | #a9b1d6 | #7aa2f7 | | catppuccin-mocha | #1e1e2e | #cdd6f4 | #cba6f7 | | github-dark | #0d1117 | #e6edf3 | #4493f8 | | nord | #2e3440 | #d8dee9 | #88c0d0 | | dracula | #282a36 | #f8f8f2 | #bd93f9 | | zinc-light | #ffffff | #27272a | (derived) | | github-light | #ffffff | #1f2328 | #0969da |
C) Terminal / ASCII output
For CLI tools or terminal display:
import { renderMermaidASCII } from 'beautiful-mermaid'
const ascii = renderMermaidASCII('graph LR; A --> B', { colorMode: 'truecolor' })D) Node.js / Backend
import { renderMermaidSVG } from 'beautiful-mermaid'
const svg = renderMermaidSVG('graph TD; A --> B', { bg: '#fff', fg: '#000' })
// svg is a string — write to file, embed in HTML, etc.Step 4: Validate
If the diagram fails to render: 1. **Check syntax** — read `~/Downloads/beautiful-mermaid/src/parser.ts` for exact parser rules 2. **Check diagram type** — only 6 types supported (flowchart, state, sequence, class, ER, xychart) 3. **Simplify** — strip to minimal reproducing case 4. **Fallback** — show raw mermaid source in a styled code block
**Common parser pitfalls:**
- `stateDiagram` (v1) is NOT supported — use `stateDiagram-v2`
- `journey` diagrams are NOT supported
- `pie` charts are NOT supported (use `xychart-beta` bar chart instead)
- `gantt` diagrams are NOT supported
- `gitgraph` is NOT supported
- Node IDs cannot start with numbers
- Semicolons work as line separators: `graph TD; A --> B; B --> C`
Failsafe Process
If `beautiful-mermaid` cannot parse the diagram:
1. **Read the parser source**: `~/Downloads/beautiful-mermaid/src/parser.ts` 2. **Check tests for examples**: `~/Downloads/beautiful-mermaid/src/__tests__/` 3. **Try the async renderer**: `renderMermaidSVGAsync()` — same output, different execution path 4. **Degrade to
Meet Coco. A superintelligent agent framework powered by an advisory board of 389 world-class minds. Scale your AI assistant into a complete engineering department with 142 skills, 277 commands, and persistent state. Universal compatibility. Local privacy. Free and open source.
Repo: coco-research/coco
Other commands on coco.
- /read
Show latest emails from a specific person. Usage: /email-read alice
Open command - /reply
Draft a reply to a specific email. Usage: /email-reply Project Phase 2 Contract Data
Open command - /save
Save matching emails to a project folder for sync processing. Usage: /email-save alice to emails/
Open command - /search
Search emails by subject keywords. Usage: /email-search github webhook
Open command - /summary
AI summary of today's emails — key decisions, action items, meetings. No arguments needed.
Open command - /thread
Show full email thread by subject. Usage: /email-thread Project Phase 2
Open command