generate-diagram
Generates visual Mermaid.js diagrams for code documentation.
Install
mkdir -p .claude/skills/generate-diagram && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/11582" && unzip -o skill.zip -d .claude/skills/generate-diagram && rm skill.zipInstalls to .claude/skills/generate-diagram
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Create Mermaid.js diagrams for architecture, flows, sequences, ERDs, and C4. Use when user says "draw a diagram", "create a flowchart", "sequence diagram", "ERD", "architecture diagram", "visualize", or needs visual documentation.Key capabilities
- →Create flowcharts
- →Generate sequence diagrams
- →Produce class/module diagrams
- →Draw Entity Relationship Diagrams (ERD)
- →Create C4 diagrams for system context
How it works
The skill creates or updates visual representations using Mermaid.js syntax within Markdown files. It supports various diagram types like flowcharts and sequence diagrams.
Inputs & outputs
When to use generate-diagram
- →Visualizing system architecture
- →Creating flowcharts for processes
- →Drafting sequence diagrams
About this skill
Create or update visual representations of code or architecture using Mermaid.js syntax within Markdown files.
Capabilities:
- Flowcharts (process flows)
- Sequence diagrams (component interaction)
- Class/Module diagrams (structure)
- Entity Relationship Diagrams (ERD — database schema)
- C4 diagrams (system context and containers)
Rules:
- Always use standard Mermaid.js syntax
- Place diagrams inside
mermaid ...blocks - Keep diagrams simple enough to be readable on a standard screen
- Prefer sequence diagrams for explaining complex asynchronous flows
- Use C4 for high-level architectural overviews
When not to use it
- →When visual documentation is not needed
- →When standard Mermaid.js syntax is not desired
Limitations
- →Requires standard Mermaid.js syntax
- →Diagrams must be simple enough for a standard screen
- →Diagrams are placed inside ```mermaid ... ``` blocks
How it compares
This skill automates diagram generation using Mermaid.js syntax, providing a structured way to visualize concepts compared to manual drawing.
Compared to similar skills
generate-diagram side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| generate-diagram (this skill) | 0 | 4mo | No flags | Beginner |
| draw-io | 41 | 6mo | Review | Intermediate |
| mermaid-expert | 27 | 4mo | No flags | Beginner |
| excalidraw-diagram-generator | 18 | 2mo | Review | Beginner |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
draw-io
davila7
draw.io diagram creation, editing, and review. Use for .drawio XML editing, PNG conversion, layout adjustment, and AWS icon usage.
mermaid-expert
sickn33
Create Mermaid diagrams for flowcharts, sequences, ERDs, and architectures. Masters syntax for all diagram types and styling. Use PROACTIVELY for visual documentation, system diagrams, or process flows.
excalidraw-diagram-generator
github
Generate Excalidraw diagrams from natural language descriptions. Use when asked to "create a diagram", "make a flowchart", "visualize a process", "draw a system architecture", "create a mind map", or "generate an Excalidraw file". Supports flowcharts, relationship diagrams, mind maps, and system architecture diagrams. Outputs .excalidraw JSON files that can be opened directly in Excalidraw.
scientific-schematics
davila7
Create publication-quality scientific diagrams using Nano Banana Pro AI with smart iterative refinement. Uses Gemini 3 Pro for quality review. Only regenerates if quality is below threshold for your document type. Specialized in neural network architectures, system diagrams, flowcharts, biological pathways, and complex scientific visualizations.
mermaid-diagrams
davila7
Comprehensive guide for creating software diagrams using Mermaid syntax. Use when users need to create, visualize, or document software through diagrams including class diagrams (domain modeling, object-oriented design), sequence diagrams (application flows, API interactions, code execution), flowcharts (processes, algorithms, user journeys), entity relationship diagrams (database schemas), C4 architecture diagrams (system context, containers, components), state diagrams, git graphs, pie charts, gantt charts, or any other diagram type. Triggers include requests to "diagram", "visualize", "model", "map out", "show the flow", or when explaining system architecture, database design, code structure, or user/application flows.
plantuml-ascii
github
Generate ASCII art diagrams using PlantUML text mode. Use when user asks to create ASCII diagrams, text-based diagrams, terminal-friendly diagrams, or mentions plantuml ascii, text diagram, ascii art diagram. Supports: Converting PlantUML diagrams to ASCII art, Creating sequence diagrams, class diagrams, flowcharts in ASCII format, Generating Unicode-enhanced ASCII art with -utxt flag