skills.rest
lrstanley
lrstanleyCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

mermaid-diagrams

Create software architecture, database, and process diagrams using Mermaid text syntax.

1|Updated Mar 27, 2026
Search Tags:#architecture#documentation#mermaid#flowchart#diagrams#sequence diagram#erd
One-click install
npx skills add https://github.com/lrstanley/skills --skill mermaid-diagrams-lrstanley
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mermaid-diagrams
Source: https://github.com/lrstanley/skills/tree/main/mermaid-diagrams
Command: npx skills add https://github.com/lrstanley/skills --skill mermaid-diagrams-lrstanley

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Communicating system architecture, database schemas, and process flows through static images is hard to maintain and review. This Skill lets you generate version-controllable diagrams from plain text Mermaid syntax that render automatically in GitHub, VS Code, Notion, and other tools. ## Core Features & Use Cases - Nine Diagram Types: Class diagrams, sequence diagrams, flowcharts, ER diagrams, C4 architecture diagrams, state diagrams, git graphs, Gantt charts, and pie/bar charts. - Detailed Syntax References: In-depth guides for relationships, cardinality, activations, alt/loop/par blocks, subgraphs, and C4 context/container/component levels. - Theming and Styling: Built-in themes (default, forest, dark, neutral, base), custom theme variables, ELK layout, and hand-drawn look options. - Use Case: Document a microservices authentication flow as a sequence diagram with alt/else branches for invalid credentials, then embed it directly in your repository's Markdown where GitHub renders it automatically. ## Quick Start Ask the AI to create a Mermaid sequence diagram showing your application's login flow between the user, frontend, API, and database.

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 sequence diagram in Mermaid?▼

Start with the sequenceDiagram keyword, declare participants, then define messages using arrows like A->>B for requests and B-->>A for responses. Use alt/else blocks for conditional flows, opt for optional steps, and loop for repeated interactions.

How do I draw an ER diagram for a database schema in Mermaid?▼

Use the erDiagram keyword and define relationships with cardinality symbols like ||--o{ for one-to-many. Declare entity attributes inside braces with type, name, and constraints such as PK, FK, and UK.

Does Mermaid render automatically in GitHub Markdown files?▼

Yes, GitHub and GitLab natively render Mermaid code blocks in Markdown files. VS Code requires the Markdown Preview Mermaid Support extension, and Notion, Obsidian, and Confluence have built-in support.

What diagram types does Mermaid support?▼

Mermaid supports class diagrams, sequence diagrams, flowcharts, entity relationship diagrams, C4 architecture diagrams, state diagrams, git graphs, Gantt charts, and pie charts. Each type uses a distinct keyword like classDiagram or flowchart.

Why does my Mermaid diagram fail to render?▼

Rendering fails from syntax errors like misspelled keywords, unsupported characters such as braces in comments, or unknown words in definitions. Validate your syntax in the Mermaid Live Editor before committing.

How do I export Mermaid diagrams to PNG or SVG?▼

Use the Mermaid Live Editor for interactive export, or install the Mermaid CLI with npm install -g @mermaid-js/mermaid-cli and run mmdc -i input.mmd -o output.png. Docker images are also available for batch exports.

Related Skills

Explore More Software Engineering Skills→
mohitmishra786mohitmishra786

architect

Design system architecture, select technology stacks, and define API contracts.

Community
Advanced
alexeybanalexeyban
21

confluence-documentation-generator

Generate Confluence-ready HTML and Markdown documentation with Mermaid diagrams for CDC lakehouse pipelines.

Community
Intermediate
automagik-devautomagik-dev
328

docs

Audit, generate, and validate documentation against the codebase.

Official
Intermediate
TacuchiTacuchi

diagrams

Generate architecture diagrams from system models using C4, Structurizr DSL, Mermaid, and PlantUML.

Community
Advanced