skills.rest
lfuuu
lfuuuCOMMUNITY
Explore all skills by this author →
GitHub

mermaid-diagrams

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

Updated Jun 2, 2026
Search Tags:#architecture#documentation#mermaid#flowchart#visualization#diagrams#erd
One-click install
npx skills add https://github.com/lfuuu/claude-rules --skill mermaid-diagrams-lfuuu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mermaid-diagrams
Source: https://github.com/lfuuu/claude-rules/tree/main/global-skills/mermaid-diagrams
Command: npx skills add https://github.com/lfuuu/claude-rules --skill mermaid-diagrams-lfuuu

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Documenting software architecture, database schemas, and process flows with traditional diagramming tools produces binary files that cannot be version-controlled, reviewed in pull requests, or updated alongside code. This Skill generates diagrams from plain-text Mermaid syntax so they live in your repository and evolve with the system. ## Core Features & Use Cases - Nine diagram types: class diagrams for domain models, sequence diagrams for API flows, flowcharts for processes, ERDs for database schemas, C4 diagrams for architecture, plus state diagrams, git graphs, Gantt charts, and pie/bar charts. - Styling and theming: built-in themes (default, forest, dark, neutral, base), custom theme variables, Dagre or ELK layout engines, and hand-drawn look options. - Detailed references: in-depth syntax guides for each diagram type covering relationships, cardinality, activations, alt/opt/par blocks, subgraphs, and icon packs. - Use Case: When designing a new microservice, generate a C4 container diagram showing services, databases, and queues, then embed it in the project README where GitHub renders it automatically. ## Quick Start Ask the assistant to create a Mermaid sequence diagram showing the 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 write messages using arrows like A->>B for requests and B-->>A for responses. Use alt/else blocks for conditional paths, opt for optional steps, and + or - to show participant activation.

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 or bar charts. Each type starts with its own keyword such as classDiagram, flowchart, or erDiagram.

Does GitHub render Mermaid diagrams automatically?▼

Yes, GitHub and GitLab render Mermaid code blocks natively inside Markdown files. VS Code renders them with the Markdown Preview Mermaid Support extension, and Notion, Obsidian, and Confluence also include built-in support.

How do I export a Mermaid diagram to PNG or SVG?▼

Use the Mermaid Live Editor at mermaid.live 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. The CLI also supports custom dimensions and background colors.

Why does my Mermaid diagram fail to render?▼

Rendering usually fails due to syntax errors such as typos in keywords or unescaped special characters like curly braces in comments. Test diagrams incrementally in the Mermaid Live Editor to catch errors early before committing them.

When should I use C4 diagrams instead of flowcharts?▼

Use C4 diagrams when documenting software architecture at context, container, or component levels, since they model systems, people, and relationships explicitly. Use flowcharts for processes, algorithms, decision trees, and user journeys instead.

Related Skills

Explore More Software Engineering Skills→
githubgithub
38.5k

efcore-d2-db-diagram

Generate D2 entity-relationship diagrams from Entity Framework Core models and migrations.

Official
Advanced
mmnavarrmmnavarr

feature-video

Record browser walkthroughs of features and embed MP4 videos in GitHub PR descriptions.

Community
Advanced
CuriousLearnerCuriousLearner
27

architecture-documenter

Document system architecture and technical decisions with diagrams and ADRs.

Community
Advanced
odeciojuniorodeciojunior

excalidraw-designer

Generate hand-drawn style diagrams as .excalidraw JSON files.

Community
Advanced