skillfed

mermaid-diagram-generator

Build flowcharts, sequence diagrams, entity relationship diagrams, and architecture visualizations directly in markdown using Mermaid syntax. The skill handles diagram identification, element definition, styling, and markdown embedding to produce publication-ready technical documentation.

Mermaid Diagram Generator creates flowcharts, sequence diagrams, and architecture visualizations using Mermaid syntax in markdown.

AI-generated summary based on this skill's SKILL.md

52 8 MIT updated by patricio0312rev

Install

patricio0312rev/skills/mermaid-diagram-generator

CLI (skillfed)coming soon
git clone https://github.com/patricio0312rev/skills
cp -r skills/foundation/mermaid-diagram-generator ~/.claude/skills/mermaid-diagram-generator

Frequently asked questions

AI-generated answers based on this skill's SKILL.md and metadata

How do I create a mermaid flowchart?

mermaid-diagram-generator builds flowcharts directly in markdown using Mermaid syntax. Define your flow with nodes and connections, apply styling for clarity, and embed the diagram in your documentation. The skill handles syntax validation and renders publication-ready flowcharts for process visualization.

What diagram types does mermaid-diagram-generator support?

mermaid-diagram-generator supports flowcharts, sequence diagrams for API interactions, entity relationship diagrams (ERD) for database schemas, architecture diagrams for microservices topology, state machines, class hierarchies, git graphs, mindmaps, and timeline diagrams—all embedded in markdown.

How to make sequence diagrams with mermaid-diagram-generator?

mermaid-diagram-generator generates sequence diagrams for system and API interactions by defining actors, messages, and timing. Specify participant roles and message flows in Mermaid syntax, and the skill produces clear visualizations showing how components communicate over time.

Can mermaid-diagram-generator create entity relationship diagrams?

Yes, mermaid-diagram-generator designs database schemas as entity relationship diagrams (ERD). Define entities, attributes, and relationships using Mermaid syntax, and the skill generates visual ERD representations suitable for technical documentation and database planning.

How does mermaid-diagram-generator handle architecture diagrams?

mermaid-diagram-generator visualizes system architecture and microservices topology by mapping components, services, and their interactions. Use Mermaid syntax to define nodes and connections, apply styling for emphasis, and embed the diagram in markdown for clear architectural documentation.

What's the license for mermaid-diagram-generator?

mermaid-diagram-generator is released under the MIT license, allowing free use, modification, and distribution in both open-source and commercial projects with minimal restrictions.

SKILL.md

rendered from the published skill — quoted content, verbatim

Mermaid Diagram Generator

Create clear, maintainable diagrams using Mermaid syntax in markdown.

Core Workflow

  1. Identify diagram type: Flow, sequence, ERD, etc.
  2. Define elements: Nodes, connections, labels
  3. Apply styling: Colors, shapes, directions
  4. Add interactions: Click handlers (optional)
  5. Embed in docs: Markdown integration

Flowchart Diagrams

Basic Flowchart
flowchart TD
    A[Start] --> B{Is user logged in?}
    B -->|Yes| C[Show Dashboard]
    B -->|No| D[Show Login Page]
    D --> E[Enter Credentials]
    E --> F{Valid credentials?}
    F -->|Yes| C
    F -->|No| G[Show Error]
    G --> D
    C --> H[End]
Node Shapes

```mermaid flowchart LR A[Rectangle] --> B(Rounded) B --> C([Stadium]) C --> D[[Subroutine]] D --> E[(Database)] E --> F((Circle)) F --> G>Asymmetric] G --> H{Diamond} H -->

(truncated - see the full file via the links below)

Read as markdown · JSON record · Browse the source repository

File tree — 1 file
foundation/mermaid-diagram-generator/SKILL.md

Related skills

Tags

diagram-as-code markdown-native visual-documentation system-design database-modeling workflow-visualization git-flow-tracking architecture-planning state-machine-design technical-diagramming