Create flowcharts, sequence diagrams, timelines, and other visuals from Mermaid.js v11 text. Render them in Markdown or export them as SVG, PNG, or PDF for documentation, planning, and architecture work.
Create diagrams and visualizations using Mermaid.js v11 syntax. Use when generating flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, Gantt charts, user journeys, timelines, architecture diagrams, or any of 24+ diagram types. Supports JavaScript API integration, CLI rendering to SVG/PNG/PDF, theming, configuration, and accessibility features. Essential for documentation, technical diagrams, project planning, system architecture, and visual communication.
Run score Not tested
See how to installReview the instructions the agent will receive before you install.
Create text-based diagrams using Mermaid.js v11 declarative syntax. Convert code to SVG/PNG/PDF via CLI or render in browsers/markdown files.
Basic Diagram Structure:
{diagram-type}
{diagram-content}
Common Diagram Types:
flowchart - Process flows, decision treessequenceDiagram - Actor interactions, API flowsclassDiagram - OOP structures, data modelsstateDiagram - State machines, workflowserDiagram - Database relationshipsgantt - Project timelinesjourney - User experience flowsSee references/diagram-types.md for all 24+ types with syntax.
Inline Markdown Code Blocks:
```mermaid
flowchart TD
A[Start] --> B{Decision}
B -->|Yes| C[Action]
B -->|No| D[End]
```
Configuration via Frontmatter:
```mermaid
---
theme: dark
---
flowchart LR
A --> B
```
Comments: Use %% prefix for single-line comments.
Convert .mmd files to images:
# 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.
HTML Embedding:
<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.
Common Options:
theme: "default", "dark", "forest", "neutral", "base"look: "classic", "handDrawn"fontFamily: Custom font specificationsecurityLevel: "strict", "loose", "antiscript"See references/configuration.md for complete config options, theming, and customization.
Load references/examples.md for:
references/diagram-types.md - Syntax for all 24+ diagram typesreferences/configuration.md - Config, theming, accessibilityreferences/cli-usage.md - CLI commands and workflowsreferences/integration.md - JavaScript API and embeddingreferences/examples.md - Practical patterns and use casesNo reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
Design interfaces by studying reference examples, setting visual rules, and balancing appearance with usability and accessibility. The skill also guides screenshot analysis, iterative design image generation, micro interactions, and documenting design decisions in project guidelines.
Use Google Gemini to analyze audio, images, videos, and PDFs, or generate and edit images. Get results such as timestamped transcripts, summaries, extracted tables, answers about media, and images made from prompts.
Use this skill to plan and build backend systems, from API design and authentication to database tuning, security, testing, deployment, and monitoring. It offers technology choices and practical checklists for turning requirements into production-ready services.
Use this skill to add authentication and authorization to TypeScript applications with Better Auth. It covers email and social sign-in, sessions, database setup, two-factor authentication, passkeys, and access rules, with guidance for several web frameworks.
Integrate Bunny.net services through their APIs to configure CDN pull zones, manage stored files and video, edit DNS records, and deploy edge scripts or containers. The skill also covers Shield protection, image optimization, and the credentials each service requires.
Use Puppeteer CLI scripts to automate browser tasks and inspect web pages. The skill can navigate, click, fill forms, capture screenshots, collect page data, monitor console and network activity, and measure performance including Core Web Vitals. Results are provided as JSON.