skills.rest
abdulazeezoj
abdulazeezojCOMMUNITY
Explore all skills by this author →
Website𝕏@abdulazeezojGitHub

diagram

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

Updated Sep 13, 2026
Search Tags:#mermaid#excalidraw#flowchart#visualization#svg#diagram#offline rendering
One-click install
npx skills add https://github.com/abdulazeezoj/monovella-poc --skill diagram-abdulazeezoj
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: diagram
Source: https://github.com/abdulazeezoj/monovella-poc/tree/main/.agents/skills/gstack/diagram
Command: npx skills add https://github.com/abdulazeezoj/monovella-poc --skill diagram-abdulazeezoj

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Turning a written description of a flow, architecture, or process into a usable diagram usually means hand-drawing in a GUI tool or settling for a static image you cannot edit later. This Skill produces a complete diagram triplet from plain English or mermaid source, fully offline. ## Core Features & Use Cases - Diagram triplet output: Every run emits the mermaid source (.mmd), an editable .excalidraw scene, plus rendered SVG and PNG files. - Fully offline rendering: Uses a self-contained local render bundle opened in a local browser engine, with no CDN or network calls. - Editable round-trips: Flowcharts and sequence diagrams convert to real Excalidraw boxes and arrows, and edited .excalidraw scenes can be re-rendered back to SVG/PNG. - Use Case: Ask for an architecture diagram of your request pipeline, and receive a committed-ready .mmd source, a crisp PNG for the README, and an .excalidraw file you can open at excalidraw.com to rearrange. ## Quick Start Ask the assistant to make a diagram of your login flow and it will generate the mermaid source, an editable Excalidraw file, and rendered SVG and PNG images.

Frequently Asked Questions about diagram

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

FAQPage Schema
How do I turn an English description into a diagram?▼

Describe the flow or architecture in plain English and the skill authors mermaid source for it, then renders a triplet: the .mmd source, an editable .excalidraw file, and SVG plus PNG images. Flowcharts and sequence diagrams become fully editable Excalidraw elements.

How do I render mermaid diagrams offline without a CDN?▼

The skill uses a self-contained local render bundle served from a loopback address and opened in a local browser engine. No network or CDN is involved, and the mermaid source is passed into the page as base64 to avoid corruption.

Can I edit the generated diagram in Excalidraw?▼

Yes, the .excalidraw file opens at excalidraw.com via File then Open. Flowcharts and sequence diagrams convert to real boxes, arrows, and text; other mermaid types like state or gantt are embedded as a single movable image element.

Does the diagram skill work with state, class, or gantt diagrams?▼

They render to SVG and PNG normally and still produce an .excalidraw file, but the converter exports them as one image element rather than individually editable shapes. You can move and annotate the image but not edit boxes one by one.

Why does diagram rendering fail with a parse error?▼

A hard ERROR line indicates a mermaid syntax problem in the .mmd source, and nothing is copied out in that case. Fix the reported line in the source file and re-run the render step to produce the triplet.

What happens if no browser is available for rendering?▼

The renderer uses the Aside browser when it is running, otherwise a built-in headless browser. If neither exists it reports no browser available, and you must open Aside or run the setup script to build the fallback before rendering.

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
shekerkammashekerkamma

diagram-export

Convert Mermaid, PlantUML, Graphviz, draw.io, and Vega diagrams to PNG/SVG/PDF.

Community
Intermediate
product-on-purposeproduct-on-purpose
640

utility-mermaid-diagrams

Create syntactically valid mermaid diagrams for product documents across 15 diagram types.

Official
Intermediate
alibabaalibaba
2.2k

mermaid

Render Mermaid diagrams from fenced code blocks in Markdown documents.

Official
Basic