skills.rest
leonardoacosta
leonardoacostaCOMMUNITY
Explore all skills by this author →
GitHub

mermaid-diagrams

Create software diagrams using Mermaid text-based syntax for documentation and architecture modeling.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Writing and maintaining software diagrams as binary images makes them hard to version, review, and update alongside code. This Skill lets you generate class diagrams, sequence diagrams, flowcharts, ERDs, C4 architecture diagrams, and more from plain-text Mermaid syntax that lives in your repository. ## Core Features & Use Cases - Full diagram type coverage: Class diagrams for domain modeling, sequence diagrams for API and authentication flows, flowcharts for processes and user journeys, ERDs for database schemas, and C4 diagrams for system context, container, and component views. - Detailed reference guides: In-depth references for each diagram type covering relationships, cardinality, activations, alt/opt/par blocks, subgraphs, styling, and theming. - Advanced configuration: Themes, custom theme variables, ELK layouts, hand-drawn look, click events, and export guidance for PNG/SVG via Mermaid CLI. - Use Case: When designing a new microservice, generate a C4 container diagram showing services, databases, and queues, plus a sequence diagram of the order-placement flow, and commit both as Markdown alongside the code. ## Quick Start Ask the AI to create a Mermaid sequence diagram showing the login flow between a user, the API, and the 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 or actors, 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 activations.

How do I model a database schema with a Mermaid ERD?▼

Use the erDiagram keyword, define entities with attributes in the form type name constraint (such as int id PK), and connect tables with cardinality symbols like ||--o{ for one-to-many. Junction tables model many-to-many relationships explicitly.

Which Mermaid diagram type should I use for system architecture?▼

Use C4 diagrams for hierarchical architecture views: C4Context for systems and users, C4Container for applications and databases, and C4Component for internal structure. For cloud infrastructure with icons, use the architecture-beta diagram introduced in Mermaid v11.1.0.

Does Mermaid render automatically on GitHub and GitLab?▼

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

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

Install the Mermaid CLI with npm install -g @mermaid-js/mermaid-cli, then run mmdc -i input.mmd -o output.png. You can also use the Mermaid Live Editor online or run the CLI through Docker for isolated exports.

Why does my Mermaid diagram fail to render?▼

Rendering usually fails from misspelled keywords, unsupported characters like curly braces in comments, or unknown words in definitions. Validate the syntax in the Mermaid Live Editor and split overly complex diagrams into smaller focused views.

Related Skills

Explore More Software Engineering Skills→
wfukatsuwfukatsu
5

er-diagram-analysis

Generate Mermaid ER diagrams and entity catalogs from codebases or database models.

Community
Intermediate
abudhahirabudhahir

architecture-documenter

Generate system architecture documentation and Architecture Decision Records.

Community
Advanced
DevonSteeDevonStee
3

readme-architecture-sync

Scans Java/Kotlin files to synchronize README architecture sections with codebase components.

Community
Intermediate
davistroydavistroy
5

bpmn-to-drawio

Convert BPMN 2.0 XML diagrams into Draw.io .drawio format.

Community
Advanced