skills.rest
AmirulAndalib
AmirulAndalibCOMMUNITY
Explore all skills by this author →
GitHub

diagram-maker

Generate SVG, HTML, and Excalidraw diagrams for concepts, architecture, and flows.

Updated Jun 19, 2026
Search Tags:#architecture#html#excalidraw#flowchart#visualization#svg#diagram
One-click install
npx skills add https://github.com/AmirulAndalib/Vilvona-AI --skill diagram-maker-amirulandalib
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: diagram-maker
Source: https://github.com/AmirulAndalib/Vilvona-AI/tree/main/skills/diagram-maker
Command: npx skills add https://github.com/AmirulAndalib/Vilvona-AI --skill diagram-maker-amirulandalib

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Turning ideas, system designs, or processes into clear visual diagrams usually requires manual drawing tools and design effort. This Skill produces ready-to-use diagram files directly from a description, choosing the right output format for the task. ## Core Features & Use Cases - Three output modes: clean SVG/HTML for concepts and processes, architecture SVG for software and infrastructure topology, and Excalidraw JSON for editable whiteboard-style sketches. - Routing guidance: Automatically selects the appropriate format based on whether the user wants editable output, polished standalone browser files, or infrastructure diagrams. - Layout and styling rules: Enforces semantic color palettes, connector layering, text padding, and bound-text Excalidraw elements so diagrams stay readable. - Use Case: Describe a microservices system with an API gateway, two services, and a database, and receive a standalone architecture HTML file with labeled nodes and directed arrows. ## Quick Start Ask the assistant to create an architecture diagram of your system as an HTML file, or request an editable Excalidraw flowchart of a process.

Frequently Asked Questions about diagram-maker

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

FAQPage Schema
How do I create an architecture diagram as an HTML file?▼

Describe the services, databases, and connections in your system and request an architecture SVG output. The Skill generates a single standalone HTML file with inline CSS and SVG, using semantic colors for inputs, processes, storage, and external components.

How do I generate an editable Excalidraw diagram from text?▼

Request Excalidraw output when you want an editable or collaborative whiteboard diagram. The Skill writes a .excalidraw JSON file with type, version, source, elements, and appState fields that you can open and modify in Excalidraw.

When should I use SVG versus Excalidraw for diagrams?▼

Choose SVG/HTML when you want a polished standalone file viewable in any browser, and Excalidraw when you need to edit or collaborate on the diagram later. Software architecture with infrastructure components fits the architecture SVG mode, while concepts and processes fit clean SVG.

Does the generated HTML diagram require external assets or internet access?▼

No. The HTML output is a single standalone file with inline CSS and inline SVG. It uses no external fonts, JavaScript, images, or remote assets, and includes light and dark color scheme support via CSS variables.

Why does my Excalidraw diagram text not attach to shapes?▼

Excalidraw labels must use bound text elements with a containerId referencing the shape, placed immediately after the container in the elements array. Using a nonstandard label property instead of boundElements will break the association.

Related Skills

Explore More Design & Creative Skills→
praxstackpraxstack
1

concept-cartographer

Convert structured notes into Mermaid diagrams for concept maps and process flows.

Community
Intermediate
CuriousLearnerCuriousLearner
27

architecture-documenter

Document system architecture and technical decisions with diagrams and ADRs.

Community
Advanced
HuynhHoangPhucHuynhHoangPhuc

sl:preview

Generate ASCII diagrams, Mermaid charts, or prose explanations for code architecture.

Community
Advanced
jrmatherlyjrmatherly
1

mermaid-diagrams

Generate software diagrams from text using Mermaid syntax.

Community
Advanced