Teaching AI agents to draw in Markdown, not crayon
A skill pack that turns 'generate a diagram' prompts into actual renderable charts, maps, and architecture diagrams inside Markdown files.

What it does
This repo ships 14 “skills” — essentially prompt templates and syntax rulebooks — for AI coding agents like Claude Code, Cursor, and GitHub Copilot. Each skill teaches the agent how to emit diagrams as Markdown code blocks (or raw HTML) that render through specific engines: PlantUML for nine diagram types, Vega-Lite for data charts, JSON Canvas for mind maps, and plain HTML/CSS for layered architecture and info cards.
The interesting bit
The project treats diagram generation as a structured output problem, not a creative writing task. Each SKILL.md file includes YAML frontmatter, critical syntax rules, common pitfalls, and fenced code expectations — so the agent produces parseable markup instead of hallucinated ASCII art. It’s essentially a type system for LLM-generated visuals.
Key highlights
- 14 skills across 5 rendering engines: PlantUML, Vega/Vega-Lite, JSON Canvas, and raw HTML/CSS
- PlantUML skills cover specialized domains: cloud (AWS/Azure/GCP/Alibaba/K8s), network (Cisco/Citrix), security (IAM/firewall), IoT, BPMN, ArchiMate, and data analytics pipelines
- Standalone skills include 70+ infographic YAML templates and spatial node-based canvas diagrams
- HTML/CSS skills offer 13 layouts × 12–14 styles for architecture layers and editorial info cards
- One-command install via
npx skills add markdown-viewer/skills; manual paths provided for Claude, Copilot, and Cursor - Requires the Markdown Viewer Extension (browser, VS Code, or Obsidian) to actually render output
Caveats
- Rendering depends entirely on the separate Markdown Viewer Extension; without it, you’re just looking at fenced code blocks
- The README’s “stunning diagrams” claim is aspirational — no example renders or screenshots are shown in the source
- Nine of fourteen skills converge on PlantUML; if you hit its layout limits, you hit them across most of the pack
Verdict
Grab this if you’re already using Claude Code or Cursor and tired of AI-generated diagrams that don’t compile. Skip it if you want standalone tooling — this is middleware for agent workflows, not a diagram editor for humans.