120 lines
2.9 KiB
Markdown
120 lines
2.9 KiB
Markdown
---
|
|
name: ck:mermaidjs-v11
|
|
description: Create diagrams with Mermaid.js v11 syntax. Use for flowcharts, sequence diagrams, class diagrams, ER diagrams, Gantt charts, state diagrams, architecture diagrams, timelines, user journeys.
|
|
argument-hint: "[diagram-type or description]"
|
|
metadata:
|
|
author: claudekit
|
|
version: "1.0.0"
|
|
---
|
|
|
|
# Mermaid.js v11
|
|
|
|
## Overview
|
|
|
|
Create text-based diagrams using Mermaid.js v11 declarative syntax. Convert code to SVG/PNG/PDF via CLI or render in browsers/markdown files.
|
|
|
|
## Quick Start
|
|
|
|
**Basic Diagram Structure:**
|
|
```
|
|
{diagram-type}
|
|
{diagram-content}
|
|
```
|
|
|
|
**Common Diagram Types:**
|
|
- `flowchart` - Process flows, decision trees
|
|
- `sequenceDiagram` - Actor interactions, API flows
|
|
- `classDiagram` - OOP structures, data models
|
|
- `stateDiagram` - State machines, workflows
|
|
- `erDiagram` - Database relationships
|
|
- `gantt` - Project timelines
|
|
- `journey` - User experience flows
|
|
|
|
See `references/diagram-types.md` for all 24+ types with syntax.
|
|
|
|
## Creating Diagrams
|
|
|
|
**Inline Markdown Code Blocks:**
|
|
````markdown
|
|
```mermaid
|
|
flowchart TD
|
|
A[Start] --> B{Decision}
|
|
B -->|Yes| C[Action]
|
|
B -->|No| D[End]
|
|
```
|
|
````
|
|
|
|
**Configuration via Frontmatter:**
|
|
````markdown
|
|
```mermaid
|
|
---
|
|
theme: dark
|
|
---
|
|
flowchart LR
|
|
A --> B
|
|
```
|
|
````
|
|
|
|
**Comments:** Use `%% ` prefix for single-line comments.
|
|
|
|
## CLI Usage
|
|
|
|
Convert `.mmd` files to images:
|
|
```bash
|
|
# Installation
|
|
npm install -g @mermaid-js/mermaid-cli
|
|
|
|
# Basic conversion
|
|
mmdc -i diagram.mmd -o diagram.svg
|
|
|
|
# With theme and background
|
|
mmdc -i input.mmd -o output.png -t dark -b transparent
|
|
|
|
# Custom styling
|
|
mmdc -i diagram.mmd --cssFile style.css -o output.svg
|
|
```
|
|
|
|
See `references/cli-usage.md` for Docker, batch processing, and advanced workflows.
|
|
|
|
## JavaScript Integration
|
|
|
|
**HTML Embedding:**
|
|
```html
|
|
<pre class="mermaid">
|
|
flowchart TD
|
|
A[Client] --> B[Server]
|
|
</pre>
|
|
<script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
|
|
<script>mermaid.initialize({ startOnLoad: true });</script>
|
|
```
|
|
|
|
See `references/integration.md` for Node.js API and advanced integration patterns.
|
|
|
|
## Configuration & Theming
|
|
|
|
**Common Options:**
|
|
- `theme`: "default", "dark", "forest", "neutral", "base"
|
|
- `look`: "classic", "handDrawn"
|
|
- `fontFamily`: Custom font specification
|
|
- `securityLevel`: "strict", "loose", "antiscript"
|
|
|
|
See `references/configuration.md` for complete config options, theming, and customization.
|
|
|
|
## Practical Patterns
|
|
|
|
Load `references/examples.md` for:
|
|
- Architecture diagrams
|
|
- API documentation flows
|
|
- Database schemas
|
|
- Project timelines
|
|
- State machines
|
|
- User journey maps
|
|
|
|
## Resources
|
|
|
|
- `references/diagram-types.md` - Syntax for all 24+ diagram types
|
|
- `references/configuration.md` - Config, theming, accessibility
|
|
- `references/cli-usage.md` - CLI commands and workflows
|
|
- `references/integration.md` - JavaScript API and embedding
|
|
- `references/examples.md` - Practical patterns and use cases
|