mermaid-diagrams

Solid

Comprehensive guide for creating software diagrams using Mermaid syntax. Use when users need to create, visualize, or document software through diagrams including class diagrams (domain modeling, object-oriented design), sequence diagrams (application flows, API interactions, code execution), flowcharts (processes, algorithms, user journeys), entity relationship diagrams (database schemas), C4 architecture diagrams (system context, containers, components), state diagrams, git graphs, pie charts, gantt charts, or any other diagram type. Triggers include requests to "diagram", "visualize", "model", "map out", "show the flow", or when explaining system architecture, database design, code structure, or user/application flows.

AI & Automation 27,705 stars 2858 forks Updated today MIT

Install

View on GitHub

Quality Score: 93/100

Stars 20%
100
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# Mermaid Diagramming Create professional software diagrams using Mermaid's text-based syntax. Mermaid renders diagrams from simple text definitions, making diagrams version-controllable, easy to update, and maintainable alongside code. ## Core Syntax Structure All Mermaid diagrams follow this pattern: ```mermaid diagramType definition content ``` **Key principles:** - First line declares diagram type (e.g., `classDiagram`, `sequenceDiagram`, `flowchart`) - Use `%%` for comments - Line breaks and indentation improve readability but aren't required - Unknown words break diagrams; parameters fail silently ## Diagram Type Selection Guide **Choose the right diagram type:** 1. **Class Diagrams** - Domain modeling, OOP design, entity relationships - Domain-driven design documentation - Object-oriented class structures - Entity relationships and dependencies 2. **Sequence Diagrams** - Temporal interactions, message flows - API request/response flows - User authentication flows - System component interactions - Method call sequences 3. **Flowcharts** - Processes, algorithms, decision trees - User journeys and workflows - Business processes - Algorithm logic - Deployment pipelines 4. **Entity Relationship Diagrams (ERD)** - Database schemas - Table relationships - Data modeling - Schema design 5. **C4 Diagrams** - Software architecture at multiple levels - System Context (systems and users) - Container (applications, databa...

Details

Author
davila7
Repository
davila7/claude-code-templates
Created
11 months ago
Last Updated
today
Language
Python
License
MIT

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category

AI & Automation Solid

mermaid-diagrams

Comprehensive guide for creating software diagrams using Mermaid syntax. Use when users need to create, visualize, or document software through diagrams including class diagrams (domain modeling, object-oriented design), sequence diagrams (application flows, API interactions, code execution), flowcharts (processes, algorithms, user journeys), entity relationship diagrams (database schemas), C4 architecture diagrams (system context, containers, components), state diagrams, git graphs, pie charts, gantt charts, or any other diagram type. Triggers include requests to "diagram", "visualize", "model", "map out", "show the flow", or when explaining system architecture, database design, code structure, or user/application flows.

1,931 Updated 2 months ago
softaworks
AI & Automation Listed

mermaid-diagrams

Comprehensive guide for creating software diagrams using Mermaid syntax. Use when users need to create, visualize, or document software through diagrams including class diagrams (domain modeling, object-oriented design), sequence diagrams (application flows, API interactions, code execution), flowcharts (processes, algorithms, user journeys), entity relationship diagrams (database schemas), C4 architecture diagrams (system context, containers, components), state diagrams, git graphs, pie charts, gantt charts, or any other diagram type. Triggers include requests to "diagram", "visualize", "model", "map out", "show the flow", or when explaining system architecture, database design, code structure, or user/application flows.

335 Updated today
aiskillstore
AI & Automation Listed

mermaid-diagrams

Create diagrams and visualizations using Mermaid syntax. Use when generating flowcharts, sequence diagrams, class diagrams, entity-relationship diagrams, Gantt charts, or any visual documentation. Triggers on Mermaid, flowchart, sequence diagram, class diagram, ER diagram, Gantt chart, diagram, visualization.

2 Updated today
Makiya1202
AI & Automation Solid

mermaid-diagrams

Creating and refining Mermaid diagrams with live reload. Use when users want flowcharts, sequence diagrams, class diagrams, ER diagrams, state diagrams, or any other Mermaid visualization. Provides best practices for syntax, styling, and the iterative workflow using mermaid_preview and mermaid_save tools.

154 Updated 4 days ago
veelenga
AI & Automation Listed

library-mermaid

Provides Mermaid diagramming patterns for technical documentation including flowcharts, sequence diagrams, ERDs, class diagrams, state diagrams, Gantt charts, and mindmaps. Use when creating architecture diagrams, documenting API sequences, illustrating database schemas, building project timelines, or asking about Mermaid syntax.

3 Updated today
Yoodaddy0311