skills.rest
sanjanb
sanjanbCOMMUNITY
Explore all skills by this author →
GitHub

diagram

Convert English descriptions or mermaid source into editable Excalidraw files and rendered SVG/PNG diagrams.

1|Updated Jul 23, 2026
Search Tags:#architecture#mermaid#excalidraw#flowchart#visualization#svg#diagram
One-click install
npx skills add https://github.com/sanjanb/my-agent-harness --skill diagram-sanjanb
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: diagram
Source: https://github.com/sanjanb/my-agent-harness/tree/main/skills/diagram
Command: npx skills add https://github.com/sanjanb/my-agent-harness --skill diagram-sanjanb

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Turning a verbal description of a system or flow into a polished diagram normally requires manual drawing tools and 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 structured diagram. - Triple Output Format: Emits the mermaid source, an .excalidraw file openable on excalidraw.com with a hand-drawn aesthetic, plus clean mermaid-style SVG and PNG renders. - Fully Offline Rendering: All conversion and rendering happens locally without sending content to external services. - Use Case: Ask the agent to "draw the architecture" of your request pipeline, and receive an editable Excalidraw file for iteration plus a PNG ready to paste into documentation. ## Quick Start Ask the agent to make a diagram of your authentication flow and open the generated .excalidraw file to edit it.

Frequently Asked Questions about diagram

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

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

Describe the flow in plain English and invoke the diagram skill. It converts the description into mermaid source, then renders an editable .excalidraw file plus SVG and PNG images you can open or share.

How to convert mermaid diagrams to Excalidraw format?▼

Provide existing mermaid source to the skill and it produces an .excalidraw file alongside the rendered outputs. The .excalidraw file opens directly on excalidraw.com and carries the hand-drawn aesthetic.

Can I generate diagrams offline without online tools?▼

Yes, the diagram generation pipeline runs fully offline. Mermaid rendering and Excalidraw file creation happen locally, so no diagram content is sent to external services.

What output formats does the diagram skill produce?▼

It produces three artifacts: the mermaid source text, an editable .excalidraw file for excalidraw.com, and rendered SVG and PNG images in the clean mermaid style.

When should I use mermaid versus Excalidraw for diagrams?▼

Use the mermaid source and SVG/PNG renders for documentation and version-controlled diagrams. Use the .excalidraw file when you need to manually adjust layout or annotate with the hand-drawn visual style.

Related Skills

Explore More Software Engineering Skills→
viktorbezdekviktorbezdek
10

visual-communication

Generate Mermaid and C4 diagram code from textual system descriptions.

Community
Intermediate
xingBaGanxingBaGan

beautiful-mermaid

Convert Mermaid diagram descriptions into SVG and PNG images.

Community
Intermediate
LudwigAJLudwigAJ

describe-design

Research codebase architecture and produce structured design documents with Mermaid diagrams.

Community
Advanced
davistroydavistroy
5

bpmn-to-drawio

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

Community
Advanced