tslateman/mermaid
skills/mermaid/SKILL.md
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, or any of 24+ diagram types. Supports CLI rendering to SVG/PNG/PDF, theming, and configuration. Essential for inline documentation diagrams that render natively on GitHub.
tools
Updated Apr 25, 2026
$ install --global
skillsauthnpx skillsauth add tslateman/duet mermaidInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 25, 2026, 6:25 PM8.7s6 files scanned
SKILL.md
- name:
- mermaid
- description:
- 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, or any of 24+ diagram types. Supports CLI rendering to SVG/PNG/PDF, theming, and configuration. Essential for inline documentation diagrams that render natively on GitHub.
Mermaid.js v11
Overview
Create text-based diagrams using Mermaid.js v11 declarative syntax. Mermaid is the only diagram format that renders natively in GitHub markdown -- no exported images to commit.
Quick Start
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 flows
WARNING:
references/diagram-types.mdcovers all 24+ diagram types with full syntax. Load only when you need a specific type's syntax.
Creating Diagrams
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.
Syntax Rules
Follow these to avoid parse errors:
- Indentation: Use consistent 4-space indentation
- Node IDs: Short unique identifiers (A, B, node1). Avoid reserved words
- Special characters: Wrap text with special characters in quotes
- Subgraphs: Must close with
endkeyword - Whitespace: No trailing whitespace (causes parsing failures)
- Complexity: Break diagrams at 15+ elements into multiple focused diagrams
CLI Usage
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.
Configuration & Theming
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.
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 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 cases
See Also
/excalidraw- For architecture diagrams where hand-drawn aesthetic and drag-and-drop editing matter/design- Design thinking applies to diagram composition and layout/prose- Diagram labels benefit from the same concision rules as prose
Related Skills
tslateman/vibe-check
development
VerifiedTrustedCommunity
Judgment linter for vibe-coded output — reads the energy of the code, not just correctness. Use when the user says "vibe check", "check this vibe code", "does this hold up", "sanity check this AI code", or after a fast generation session before committing.
SKILL.mdUpdated Apr 25, 2026
tslateman/vamp
tools
VerifiedTrustedCommunity
Survey the project and choose what to play next
SKILL.mdUpdated Apr 25, 2026
tslateman/testing
development
VerifiedTrustedCommunity
Design test strategy using Beck's Test Desiderata — which properties matter, which tradeoffs to make. Use when the user asks "how should I test this", "what tests do I need", "review my test strategy", "is this well-tested", or when planning tests for a new feature or refactor.
SKILL.mdUpdated Apr 25, 2026
tslateman/sweep
testing
VerifiedTrustedCommunity
Post-op check for artifacts, damage, and stale references after agent work
SKILL.mdUpdated Apr 25, 2026