skills.rest
sunLeee
sunLeeeCOMMUNITY
Explore all skills by this author →
GitHub

diagram-generator

Analyze codebases to generate Mermaid diagrams and Draw.io XML.

Updated Mar 19, 2026
Search Tags:#architecture#mermaid#codebase#visualization#diagram#drawio
One-click install
npx skills add https://github.com/sunLeee/optimization --skill diagram-generator-sunleee
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: diagram-generator
Source: https://github.com/sunLeee/optimization/tree/main/.claude/skills/utility/diagram-generator
Command: npx skills add https://github.com/sunLeee/optimization --skill diagram-generator-sunleee

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Codebases often lack coherent, shareable diagrams that communicate architecture and data flow; this skill automatically analyzes a codebase and produces Mermaid diagrams and Draw.io XML to improve documentation and onboarding.

Core Features & Use Cases

  • Mermaid diagram generation for Class, Sequence, ER, Flowchart, State, Architecture, Activity, Timeline, Use Case, WBS, PERT, RACI, BPMN, Swimlane, Network, and Cloud from code.
  • Draw.io XML export for seamless import into diagrams.net and other tools.
  • Use cases include visualizing API flows, database schemas, and deployment architectures directly from source code.

Quick Start

Request a diagram by type and target, for example diagram class src/models to generate a class 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 Mermaid diagrams from my codebase?▼

To generate Mermaid diagrams from a codebase, you request a diagram by type and target directory. The skill analyzes the source code to produce Mermaid syntax visualizing architecture, data flow, and component interactions.

Can I export codebase architecture diagrams to Draw.io XML format?▼

Yes, you can export codebase architecture diagrams to Draw.io XML format. The skill outputs Draw.io compatible XML alongside Mermaid syntax, allowing seamless import into diagrams.net and other compatible tools.

What types of diagrams can I create from source code analysis?▼

Source code analysis supports creating Class, Sequence, ER, Flowchart, State, Architecture, Activity, Timeline, Use Case, WBS, PERT, RACI, BPMN, Swimlane, Network, and Cloud diagrams to visualize API flows, database schemas, and deployment architectures.

Does the generated Mermaid syntax validate for rendering errors?▼

Yes, the generated Mermaid syntax is validated to ensure renderable diagrams. The skill checks for node uniqueness, edge connectivity, and proper syntax to prevent rendering errors before outputting the final diagram code.

What is the best way to visualize database schemas from source code?▼

The best way to visualize database schemas from source code is using the ER diagram generation feature. It analyzes your codebase structure and outputs validated Mermaid syntax representing entity relationships and data flow.

Can I generate sequence diagrams for API flows directly from code?▼

Yes, you can generate sequence diagrams for API flows directly from code. The skill analyzes your source code to produce Mermaid syntax that visualizes component interactions and data flow within your architecture.

Related Skills

Explore More Software Engineering Skills→
abdullah1854abdullah1854
1

memory-systems

Design memory architectures with vector stores, knowledge graphs, and temporal knowledge graphs.

Community
Advanced
xpert-aixpert-ai
8

index

Convert Mermaid drafts into editable draw.io diagrams with version tracking.

Official
Intermediate
TrecekTrecek
1

make-arch-diag

Generate component, data flow, and sequence diagrams in mermaid syntax.

Community
Advanced
BojackxiangBojackxiang

react-flow-implementation

Implement node-based diagrams and flow editors in React using @xyflow/react.

Community
Intermediate