skills.rest
hongmaple0820
hongmaple0820COMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/hongmaple0820/agent-academy --skill diagram-generator-hongmaple0820
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
SecKatieSecKatie

mermaid

Orchestrate the Mermaid CLI to convert Mermaid definitions into SVG, PNG, and PDF diagrams.

Community
Advanced
Thanh-aperoThanh-apero
1

mermaidjs-v11

Creates and renders Mermaid.js v11 diagrams from markdown to SVG, PNG, PDF via CLI.

Community
Intermediate
datamonsterrdatamonsterr

mermaid

Render Mermaid syntax into diagrams for processes, workflows, and system interactions.

Community
Intermediate
HouseGarofaloHouseGarofalo
3

mermaid-diagrams

Generate flowcharts, sequence diagrams, class diagrams, and ERDs from Mermaid syntax.

Official
Basic