markdown-viewer-skills
Catalogue stub — full package: markdown-viewer/skills
Decision tree
Run this before any chart, diagram, or infographic work:
Is the package already installed?
Check: ~/.design-agent-skills/skills/vega/SKILL.md exists (representative skill).
- Yes → invoke the relevant skill by name and proceed
- No → go to step 2
Do you have shell access?
- Yes → run the install command below, then invoke the skill
- No → show the install command; in Claude Code, send it as a chat message starting with
! — add -g for global install or omit for project-only
Install command
npx skills add markdown-viewer/skills
Invoke after install
14 skills across 5 rendering engines:
| Skill |
Engine |
Use case |
vega |
Vega-Lite |
bar, line, scatter, heatmap, radar, word cloud |
infographic |
HTML/CSS |
70+ templates: KPI cards, timelines, roadmaps, SWOT |
canvas |
JSON Canvas |
mind maps, knowledge graphs, concept maps |
architecture |
HTML/CSS |
layer diagrams, 13 layouts × 12 styles |
infocard |
HTML/CSS |
editorial info cards, 13 layouts × 14 styles |
uml |
PlantUML |
14 UML types + 9,500 mxgraph icons |
cloud |
PlantUML |
AWS, Azure, GCP, Kubernetes icons |
network |
PlantUML |
Cisco/Citrix network device icons |
security |
PlantUML |
IAM, encryption, firewall, compliance |
archimate |
PlantUML |
enterprise architecture, ArchiMate layers |
bpmn |
PlantUML |
business process, EIP, Lean Mapping |
data-analytics |
PlantUML |
ETL/ELT, data warehouse, ML workflows |
iot |
PlantUML |
IoT devices, sensors, edge computing |
mindmap |
PlantUML |
mind map syntax with directional branches |
What it does
The most complete visualization skill collection: 14 skills across 5 rendering engines with 98%+ format coverage. Covers everything from simple charts to enterprise architecture diagrams, cloud topology, and polished infographic templates.
1---
2name: markdown-viewer-skills
3description: |
4 14 visualization skills across 5 rendering engines: Vega-Lite, PlantUML,
5 JSON Canvas, HTML/CSS, and Infographic templates. The most complete data
6 visualization and diagram collection — charts, UML, cloud architecture,
7 network diagrams, mind maps, and 70+ infographic templates.
8triggers:
9 - "markdown viewer"
10 - "vega chart"
11 - "PlantUML"
12 - "JSON Canvas"
13 - "infographic"
14 - "UML diagram"
15 - "cloud architecture diagram"
16 - "network diagram"
17das:
18 category: data-visualization
19 upstream: "https://github.com/markdown-viewer/skills"
20 version: latest
21 install: false
22---
23
24# markdown-viewer-skills
25
26> Catalogue stub — full package: [markdown-viewer/skills](https://github.com/markdown-viewer/skills)
27
28## Decision tree
29
30Run this before any chart, diagram, or infographic work:
31
321. **Is the package already installed?**
33 Check: `~/.design-agent-skills/skills/vega/SKILL.md` exists (representative skill).
34 - Yes → invoke the relevant skill by name and proceed
35 - No → go to step 2
36
372. **Do you have shell access?**
38 - Yes → run the install command below, then invoke the skill
39 - No → show the install command; in Claude Code, send it as a chat message starting with `!` — add `-g` for global install or omit for project-only
40
41## Install command
42
43```bash
44npx skills add markdown-viewer/skills
45```
46
47## Invoke after install
48
4914 skills across 5 rendering engines:
50
51| Skill | Engine | Use case |
52|-------|--------|----------|
53| `vega` | Vega-Lite | bar, line, scatter, heatmap, radar, word cloud |
54| `infographic` | HTML/CSS | 70+ templates: KPI cards, timelines, roadmaps, SWOT |
55| `canvas` | JSON Canvas | mind maps, knowledge graphs, concept maps |
56| `architecture` | HTML/CSS | layer diagrams, 13 layouts × 12 styles |
57| `infocard` | HTML/CSS | editorial info cards, 13 layouts × 14 styles |
58| `uml` | PlantUML | 14 UML types + 9,500 mxgraph icons |
59| `cloud` | PlantUML | AWS, Azure, GCP, Kubernetes icons |
60| `network` | PlantUML | Cisco/Citrix network device icons |
61| `security` | PlantUML | IAM, encryption, firewall, compliance |
62| `archimate` | PlantUML | enterprise architecture, ArchiMate layers |
63| `bpmn` | PlantUML | business process, EIP, Lean Mapping |
64| `data-analytics` | PlantUML | ETL/ELT, data warehouse, ML workflows |
65| `iot` | PlantUML | IoT devices, sensors, edge computing |
66| `mindmap` | PlantUML | mind map syntax with directional branches |
67
68## What it does
69
70The most complete visualization skill collection: 14 skills across 5 rendering engines with 98%+ format coverage. Covers everything from simple charts to enterprise architecture diagrams, cloud topology, and polished infographic templates.
podo