$npx skillfedfor your agent

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 MITupdated by patricio0312rev

Decision gist · record as of 2026-01-12

Mermaid Diagram Generator creates flowcharts, sequence diagrams, and architecture visualizations using Mermaid syntax in markdown. 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.

manual: git clone https://github.com/patricio0312rev/skills → cp -r skills/foundation/mermaid-diagram-generator ~/.claude/skills/mermaid-diagram-generator
foundation/mermaid-diagram-generator/SKILL.md · version 7edcf2a9

Use it when

  • mermaid-diagram-generator supports flowcharts, sequence diagrams for API interactions.
  • mermaid-diagram-generator generates sequence diagrams for system and API interactions by defining actors, messages, and timing.

Verify before relying

Read SKILL.md below before installing (1 file). Open directory: indexed for reading, not audited.

Same gist for agents: .md · .json

Install

patricio0312rev/skills/mermaid-diagram-generator

Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.

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)

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

Let your AI agent find skills like this

Example. Real query, live index.

You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.

wish › “Create flowcharts and process diagrams using Mermaid syntax”

Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →

Related skills

mermaid-diagrams
by nicepkg · nicepkg/ai-workflow

Mermaid Diagrams enables you to build flowcharts, sequence diagrams, class diagrams, entity-relationship diagrams, Gantt charts, and other visual documentation using Mermaid markdown syntax. The skill supports multiple diagram types with full syntax reference and styling options.

MITfor claude-codeupdated Jan 2026
★ 270repo stars
Mermaid Builder
by majesticlabs-dev · majesticlabs-dev/majestic-marketplace

Mermaid Builder provides step-by-step assistance for building diagrams across multiple formats—flowcharts, sequence diagrams, class diagrams, state diagrams, Gantt charts, ER diagrams, and data lineage visualizations. It emphasizes correct syntax, clear communication, and modular design to ensure your diagrams render properly and convey complex ideas simply.

no license declared → metadata onlyupdated May 2026
★ 44repo stars
Excalidraw Mermaid
by Tomlord1122 · Tomlord1122/tomtom-skill

Excalidraw Mermaid specializes in authoring Mermaid source code that converts seamlessly into Excalidraw drawings. It prioritizes visual clarity and supported diagram types, ensuring your output pastes once and renders without surprises.

no license declared → metadata onlyupdated Jun 2026
★ 0repo stars
Aris Mermaid Diagram
by OpenLAIR · OpenLAIR/dr-claw

Aris Mermaid Diagram converts your requirements into publication-ready Mermaid diagrams, supporting flowcharts, sequence diagrams, class diagrams, ER diagrams, Gantt charts, and 18 additional diagram types. The skill automatically verifies syntax, renders PNG output, and saves both raw .mmd and markdown-wrapped .md files for seamless integration into documentation.

no license declared → metadata onlyupdated Jul 2026
★ 1,038repo stars
Design Doc Mermaid
by SpillwaveSolutions · SpillwaveSolutions/design-doc-mermaid

Design Doc Mermaid transforms descriptions and source code into visual diagrams across multiple types—activity flows, deployment infrastructure, system architecture, and API sequences. It includes specialized guides for different diagram categories, code-to-diagram workflows for popular frameworks, and Python utilities for extraction and image conversion.

no license declared → metadata onlyupdated Dec 2025
★ 138repo stars
mermaid-tools
by daymade · daymade/claude-code-skills

Mermaid Tools extracts diagram code from markdown files and renders them as high-resolution PNG images. The skill bundles all necessary scripts and supports custom sizing, smart dimension detection by diagram type, and print-quality output scaling.

MITupdated Jul 2026
★ 1,299repo stars

More skills markdown-mermaid-writing (MIT) · sf-diagram-mermaid (MIT) · Mermaid Diagrams (unlicensed) · mermaid-diagramming (MIT) · creating-mermaid-diagrams (MIT)

Tags
diagram-as-codemarkdown-nativevisual-documentationsystem-designdatabase-modelingworkflow-visualizationgit-flow-trackingarchitecture-planningstate-machine-designtechnical-diagramming