skills.rest
k0d3x8its
k0d3x8itsCOMMUNITY
Explore all skills by this author →
Website𝕏@k0d3x8itsGitHub

diagram

Generate SVG, PNG, or PDF diagrams from text descriptions using Mermaid and PlantUML.

3|Updated Oct 28, 2020
Search Tags:#mermaid#flowchart#SVG#Render#diagram#plantuml#DFD
One-click install
npx skills add https://github.com/k0d3x8its/dotfiles --skill diagram-k0d3x8its
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: diagram
Source: https://github.com/k0d3x8its/dotfiles/tree/main/claude/.claude/skills/diagram
Command: npx skills add https://github.com/k0d3x8its/dotfiles --skill diagram-k0d3x8its

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @mermaid-js/mermaid-cli, plantuml, and includes scripts (resource) and references (resource) components.

What problem does it solve? Turning a plain-English process description into a rendered diagram normally requires picking a diagram engine, learning its syntax, and wiring up CLI tooling. This Skill automates engine selection, syntax generation, and rendering so a single sentence produces a finished diagram image plus an editable source file. ## Core Features & Use Cases - Automatic engine selection: Defaults to Mermaid flowcharts, switches to PlantUML for UML activity diagrams with swimlanes or fork/join parallelism, and renders Shostack/SDL data-flow diagrams with trust boundaries when DFD mode is requested. - Dual output artifacts: Every render produces both the image (SVG/PNG/PDF, chosen by file extension) and the editable source (.mmd or .puml) for later editing in mermaid.live, Miro, VS Code, or any PlantUML editor. - Dependency-checked rendering: The bundled render.sh script verifies mmdc, plantuml, or a JVM exists and prints a clear install hint when a dependency is missing. - Use Case: Ask for a checkout flow with parallel card charging and stock reservation; the Skill detects the parallel branches, picks PlantUML, and renders ./diagram.svg alongside diagram.puml. ## Quick Start Ask the AI to run /diagram "user signs up, verify email, then activate" to render a Mermaid flowchart as diagram.svg in the current directory.

Frequently Asked Questions about diagram

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

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

Run /diagram followed by a quoted description, such as /diagram "user signs up, verify email, then activate". The Skill translates the description into Mermaid flowchart syntax and renders diagram.svg in the current directory by default.

Mermaid vs PlantUML for activity diagrams with swimlanes?▼

PlantUML is required for real swimlanes and fork/join parallel branches, which Mermaid flowcharts cannot express. The Skill auto-selects PlantUML when the request mentions uml, swimlanes, or explicit parallel work, or when the -uml flag is passed.

How do I render a data-flow diagram with trust boundaries?▼

Pass the -dfd flag or include the words dfd or data flow diagram in the request. The Skill renders a Mermaid flowchart LR using Shostack/SDL notation with dashed subgraph trust boundaries, labeled data flows, and stable element IDs.

What dependencies are needed to render Mermaid diagrams from the CLI?▼

Mermaid rendering requires Node with @mermaid-js/mermaid-cli installed globally so mmdc is on PATH. PlantUML rendering needs a JVM plus either a plantuml command or the PLANTUML_JAR environment variable pointing at plantuml.jar.

Why does mmdc fail with sandbox errors on Ubuntu?▼

Ubuntu AppArmor blocks Chromium's unprivileged user-namespace sandbox, so the Skill passes a bundled puppeteer config with --no-sandbox to mmdc. This is safe here because Chromium only loads locally generated diagram syntax, never untrusted web content.

Can I edit the diagram after it is rendered?▼

Yes, every render emits an editable source file beside the image with the same basename. The .mmd file opens in mermaid.live, Miro, or VS Code, and the .puml file opens in any PlantUML editor or server.

Related Skills

Explore More Software Engineering Skills→
tense-itense-i
1

stride-analysis-patterns

Apply the STRIDE methodology to identify and categorize security threats.

Community
Advanced
AvistianAvistian

beautiful-mermaid

Render Mermaid diagrams as SVG and high-resolution PNG images with themed styling.

Community
Intermediate
braydos-hbraydos-h
4

performing-threat-modeling-with-owasp-threat-dragon

Create OWASP Threat Dragon data flow diagrams and apply STRIDE analysis to generate threat model reports.

Community
Intermediate
RDCrystalLabRDCrystalLab

drawio

Generate editable draw.io diagrams using structured mxCell XML.

Official
Advanced