skills.rest
aicodepro
aicodeproOFFICIAL
Explore all skills by this author →
GitHub

diagram

Convert English descriptions or mermaid source into editable Excalidraw, SVG, and PNG diagrams offline.

Updated Jun 22, 2026
Search Tags:#architecture#mermaid#excalidraw#flowchart#visualization#svg#diagram
One-click install
npx skills add https://github.com/aicodepro/ai-agent-nexi --skill diagram-aicodepro
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: diagram
Source: https://github.com/aicodepro/ai-agent-nexi/tree/main/agent/skills/gstack/diagram
Command: npx skills add https://github.com/aicodepro/ai-agent-nexi --skill diagram-aicodepro

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Turning a textual idea or architecture description into a polished diagram normally requires manual drawing tools or online services. This Skill generates a complete diagram triplet — mermaid source, an editable .excalidraw file, and rendered SVG/PNG images — entirely offline. ## Core Features & Use Cases - Text-to-Diagram Generation: Accepts a plain English description or existing mermaid source and produces a clean mermaid-style diagram. - Triple Output: Produces the mermaid source, an editable .excalidraw file (openable on excalidraw.com with a hand-drawn aesthetic), and rendered SVG plus PNG images. - Fully Offline: No cloud rendering services are required; everything is generated locally. - Use Case: Ask to "diagram the request flow between the API gateway, auth service, and database" and receive an editable Excalidraw file plus shareable PNG/SVG renders. ## Quick Start Ask the assistant to make a diagram of your system architecture or flow, describing the components and connections in plain English.

Frequently Asked Questions about diagram

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

FAQPage Schema
How do I create a diagram from a text description?▼

Describe the components and relationships in plain English, such as asking to diagram a request flow or architecture. The Skill converts the description into mermaid source and renders it into SVG, PNG, and an editable Excalidraw file.

Can I convert existing mermaid code into an Excalidraw file?▼

Yes, the Skill accepts existing mermaid source as input and produces an editable .excalidraw file alongside rendered SVG and PNG images. The Excalidraw output carries a hand-drawn aesthetic while the renders stay in clean mermaid style.

Does diagram generation require an internet connection?▼

No, the generation pipeline runs fully offline. The resulting .excalidraw file can optionally be opened on excalidraw.com for further manual editing, but that step is not required.

What output formats does the diagram skill produce?▼

It produces three artifacts: the mermaid source text, an editable .excalidraw file, and rendered SVG and PNG images. This covers editing, documentation embedding, and sharing use cases.

When should I use mermaid versus Excalidraw output?▼

Use the mermaid source and SVG/PNG renders for documentation and clean presentation visuals. Use the .excalidraw file when you want to manually refine the diagram with a hand-drawn look on excalidraw.com.

Related Skills

Explore More Design & Creative Skills→
SpaceZephyrSpaceZephyr
127

space-mermaid-diagram

Convert textual descriptions into Mermaid diagrams and save them to Obsidian notebooks.

Community
Intermediate
abdulazeezojabdulazeezoj

diagram

Converts English descriptions or mermaid source into editable Excalidraw, SVG, and PNG diagram files.

Community
Intermediate
mituso89mituso89
2

m-receiving-code-review

Verify code review feedback against the codebase for technical accuracy.

Community
Intermediate
davistroydavistroy
5

bpmn-to-drawio

Convert BPMN 2.0 XML diagrams into Draw.io .drawio format.

Community
Advanced