skills.rest
joshhornby
joshhornbyCOMMUNITY
Explore all skills by this author →
Website𝕏@joshua_hornbyGitHub

diagrams

Create diagrams and visualizations in Markdown using Mermaid, Graphviz, Vega-Lite, PlantUML, and HTML templates.

Updated May 18, 2024
Search Tags:#markdown#mermaid#visualization#diagrams#plantuml#graphviz#vega-lite
One-click install
npx skills add https://github.com/joshhornby/dotfiles --skill diagrams-joshhornby
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: diagrams
Source: https://github.com/joshhornby/dotfiles/tree/main/.claude/skills/diagrams
Command: npx skills add https://github.com/joshhornby/dotfiles --skill diagrams-joshhornby

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Choosing the right diagram syntax and writing it correctly is error-prone: each renderer (Mermaid, Graphviz, Vega-Lite, PlantUML) has its own syntax rules, and picking the wrong tool for a flowchart, chart, or architecture diagram leads to broken or unreadable output. This Skill provides a decision guide plus detailed syntax references so diagrams render correctly the first time. ## Core Features & Use Cases - Tool Selection Guide: A decision table maps each need (flowchart, data chart, cloud architecture, KPI card, mind map) to the right tool and code fence. - Detailed Syntax References: Per-tool reference files cover critical syntax rules, common pitfalls, layout controls, and styling for Mermaid, Graphviz, Vega-Lite, PlantUML, infographics, JSON Canvas, architecture diagrams, and infocards. - Use Case: When asked to document a microservices platform, the Skill directs you to PlantUML with cloud stencils or the HTML architecture layout, then provides the exact template and color palette to produce a layered system diagram. ## Quick Start Ask the assistant to create a sequence diagram of your API authentication flow in Markdown and it will select Mermaid and apply the correct syntax rules.

Frequently Asked Questions about diagrams

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

FAQPage Schema
How do I create a flowchart or sequence diagram in Markdown?▼

Use a Mermaid code fence with flowchart or sequenceDiagram syntax. Mermaid renders natively on GitHub, most IDEs, and most Markdown viewers, making it the default choice for process flows, state machines, and API interaction diagrams.

Which tool should I use for data charts in Markdown?▼

Use Vega-Lite for data-driven charts like bar, line, scatter, and heatmaps by writing declarative JSON in a vega-lite code fence. For KPI cards, funnels, and roadmaps, use the infographic template syntax instead.

Mermaid vs PlantUML for architecture diagrams?▼

Mermaid is simpler and renders on GitHub, suiting basic component diagrams. PlantUML supports UML diagram types plus cloud provider icon stencils for AWS, Azure, GCP, and Kubernetes, making it better for detailed architecture documentation.

Do these diagram code fences render on GitHub?▼

Only Mermaid fences render natively on GitHub, most IDEs, and standard Markdown viewers. The dot, vega-lite, infographic, and canvas fences, plus raw HTML cards, require a compatible viewer such as the docu.md Markdown Viewer extension.

Why does my Mermaid diagram fail to render?▼

Common causes include a space after a period in node labels like [1. Item], subgraph names with unquoted spaces, and referencing a subgraph display name instead of its ID. Quote node text containing spaces and use flowchart instead of graph.

What are the limitations of the PlantUML mxgraph stencil syntax?▼

The mxgraph stencil syntax is a docu.md viewer extension, not standard PlantUML, so official renderers reject it. For portable output, use the official stdlib icon includes such as awslib, azure, gcp, or k8s instead.

Related Skills

Explore More Software Engineering Skills→
limzivectorlimzivector

diagram

Translate English descriptions or mermaid source code into editable .excalidraw files.

Community
Intermediate
igot-aiigot-ai

create-architecture

Generate architecture documentation with ADRs, Mermaid diagrams, and tech-stack rationale.

Official
Advanced
Brite-NitesBrite-Nites

visual-explainer

Generate self-contained HTML visual explanations for architectures, diffs, and data tables.

Official
Advanced
sumik5sumik5
1

creating-diagrams

Create flowcharts, sequence diagrams, and ER diagrams using Mermaid syntax.

Community
Advanced