Markdown Viewer Skills — 9,500 Icons and 14 Diagram Types for AI Agents

Need a cloud architecture diagram? Network topology? Data pipeline visualization? Markdown Viewer Skills gives AI coding agents 14 diagram skills backed by 9,514 stencil icons across 60 libraries — AWS, Azure, GCP, Cisco, Kubernetes, and more. Install one package, and Claude Code can generate professional diagrams directly inside your markdown files using PlantUML, Vega-Lite, JSON Canvas, or inline HTML/CSS.

The 14 Skills Across 5 Engines

PlantUML-Based (9 skills)

Standalone Engines (3 skills)

HTML/CSS Embedded (2 skills)

The 9,514 Icons

Not 6,000 — the actual count is 9,514 stencil icons across 60 mxgraph categories:

Plus: Azure, IBM Cloud, Kubernetes, SysML, iOS mockups, Bootstrap, Floorplan, and 48 more.

Installation & Usage

# Install all 14 skills
npx skills add markdown-viewer/skills

# Then in Claude Code:
"Generate an AWS architecture diagram for a serverless API"
"Create a network topology with Cisco devices"
"Draw a data pipeline from Kafka to Snowflake"

Diagrams render via the companion Markdown Viewer browser extension (Chrome/Edge/Firefox/VS Code), which exports to Word (.docx) with editable content.

How LearnAI Team Could Use This

• Course materials — Generate cloud architecture, UML, and data flow diagrams directly in markdown lecture notes. No separate drawing tool needed.
• Student assignments — Students describe a system → Claude Code generates the PlantUML diagram → renders in the browser extension. Teaches architecture thinking.
• Research papers — The architecture and infographic skills produce publication-quality visuals. SVG output via PlantUML scales to any resolution.
• Wiki illustrations — Generate diagrams for LearnAI wiki entries without leaving Claude Code. The vega skill handles data visualization charts.
• Teaching UML — 14 UML diagram types with examples. Students learn UML by generating diagrams from descriptions rather than manually drawing.

Real-World Use Cases

1. Architecture documentation — Engineering teams maintain living architecture docs in markdown with auto-generated diagrams that update as the system evolves.
2. Cloud migration planning — Visualize current vs. target AWS/Azure/GCP architectures with proper provider icons.
3. Security audits — Generate security architecture diagrams showing IAM, encryption, and compliance boundaries.
4. Data engineering — ETL pipeline visualizations with proper icons for Kafka, Spark, Snowflake, dbt.
5. Executive presentations — The infographic skill’s 70+ templates (KPIs, SWOT, funnels) generate boardroom-ready visuals.

vs. Fireworks Tech Graph