diagram-generator

Generate PNG or SVG diagrams from Mermaid syntax.

9|2|Updated Mar 12, 2026

Search Tags:#architecture #documentation #mermaid #flowchart #sequence #diagrams #mermaid-cli

Ready to run

npx skills add https://github.com/hongmaple0820/agent-academy --skill diagram-generator-hongmaple0820

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: diagram-generator
Source: https://github.com/hongmaple0820/agent-academy/tree/main/skills/documentation/diagram-generator
Command: npx skills add https://github.com/hongmaple0820/agent-academy --skill diagram-generator-hongmaple0820

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Converts Mermaid syntax into visual diagrams to simplify documentation and architectural planning, reducing manual drawing effort.

Core Features & Use Cases

Flowchart, Sequence, Class, ER, State, Gantt, Pie, and Architecture diagrams rendered from Mermaid DSL for quick visuals.
Suitable for technical docs, design reviews, onboarding guides, and project briefs.
Example: Given a Mermaid diagram DSL, generate a flowchart illustrating user signup flow or a sequence diagram of API interactions.

Quick Start

Provide a Mermaid DSL and run the generator to produce the corresponding diagram.

Frequently Asked Questions about diagram-generator

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I generate diagrams from Mermaid syntax for technical documentation?▼

To generate diagrams from Mermaid syntax, provide the Mermaid DSL input to render visual outputs like flowcharts, sequence diagrams, and architecture designs. This simplifies technical documentation by automating diagram creation from text.

Can I render a sequence diagram or ER diagram using Mermaid CLI?▼

Yes, you can render sequence diagrams and ER diagrams using Mermaid CLI. The generator supports multiple diagram types including flowchart, classDiagram, erDiagram, stateDiagram-v2, gantt, and pie charts.

What diagram types are supported by the Mermaid generator?▼

The Mermaid generator supports flowchart, sequenceDiagram, classDiagram, erDiagram, stateDiagram-v2, gantt, and pie diagram types. It outputs these visual diagrams in either PNG or SVG format via Mermaid CLI.

Does the Mermaid diagram generator output PNG or SVG files?▼

Yes, the Mermaid diagram generator outputs both PNG and SVG files. It processes Mermaid syntax via Mermaid CLI to produce visual diagrams suitable for technical documentation and architecture design.