diagram-maker

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

1|Updated Jun 9, 2026
One-click install
npx skills add https://github.com/JEROME-PRAKASH-L/openclaw --skill diagram-maker-jerome-prakash-l
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: diagram-maker
Source: https://github.com/JEROME-PRAKASH-L/openclaw/tree/main/skills/diagram-maker
Command: npx skills add https://github.com/JEROME-PRAKASH-L/openclaw --skill diagram-maker-jerome-prakash-l

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 sketches. - Routing guidance: Automatically selects the right format based on whether the user wants editable collaboration, polished standalone output, or infrastructure diagrams. - Reusable templates and patterns: Ships with a standalone HTML/SVG template and Excalidraw element snippets (labeled shapes, bound text, arrows, palette) for consistent results. - Use Case: Describe a microservices system with an API gateway, services, and a database, and receive a standalone architecture diagram as a single HTML file you can open in any browser. ## Quick Start Ask the assistant to create an architecture diagram of your system as an SVG HTML file, or request an editable Excalidraw whiteboard of your process flow.

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 from a text description?

Describe the nodes, groups, labels, and directed relationships of your system, and the Skill generates a standalone HTML file with inline SVG. It uses semantic colors for inputs, processes, storage, external systems, and risks, with arrows drawn behind boxes.

Should I use SVG or Excalidraw for my diagram?

Choose Excalidraw when you need an editable, collaborative whiteboard with a hand-drawn style. Choose SVG/HTML when you want a polished standalone file that opens directly in a browser without external assets.

What diagram types can be generated?

Supported types include concept maps, physical systems, process and lifecycle diagrams, data flows, software and cloud architecture topology, flowcharts, and sequence diagrams. Layouts include left-to-right, top-down, hub-spoke, swimlanes, layered stacks, and sequences.

Does the generated SVG HTML require external dependencies?

No. The output is a single standalone HTML 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.

What are the limitations of the Excalidraw output?

Excalidraw files must follow the standard JSON envelope with type, version, source, elements, and appState. Labels require bound text elements rather than a nonstandard label property, with minimum shape size of 120x60 and minimum 16px body text.