Turn Markdown into Professional Charts Instantly with an Open‑Source AI Skill Library

13 Skills Covering 5 Rendering Engines

The core value of the project is that it splits chart‑generation capability into 13 independent skills, each mapped to one of five rendering engines.

1. PlantUML family (9 skills)

uml — 14 UML diagram types covering class, sequence, state, component, etc.

cloud — Icons for AWS, Azure, GCP, Alibaba Cloud, and Kubernetes.

network — Cisco, Citrix and other network device icons for LAN/WAN topologies.

security — Security‑architecture icons such as IAM, firewalls, encryption, zero‑trust.

archimate — Enterprise Architecture ArchiMate layered modeling.

bpmn — Business Process Model and Notation symbols.

data-analytics — Data pipeline and analytics workflow symbols.

iot — IoT devices, sensors, edge‑computing icons.

… (total of 9500+ mxgraph icons).

2. Vega/Vega‑Lite (1 skill)

vega — Data‑driven chart engine supporting bar, line, scatter, heatmap, radar, word‑cloud and other visualizations, suitable for dashboards and analysis reports.

3. HTML/CSS Direct Output (2 skills)

architecture — 13 layouts × 12 styles for layered architecture diagrams (user, application, data, infrastructure layers).

infocard — 13 layouts × 14 styles for information cards with editorial‑grade typography, ideal for knowledge summaries, data highlights, and announcements.

4. Canvas (1 skill)

canvas — Uses JSON Canvas format to draw mind maps, knowledge graphs, and concept maps; nodes are freely positioned, fitting brainstorming and planning boards.

5. Infographic (1 skill)

infographic — Over 70 preset templates driven by YAML, covering KPI cards, timelines, roadmaps, SWOT analysis, funnel charts, etc.

How Does It Work?

Using PlantUML as an example, you write a fenced code block in Markdown that specifies the skill type:

```plantuml
@startuml
...your diagram content...
@enduml
```

The AI assistant detects the code‑block type, invokes the corresponding SKILL.md, and returns an SVG image.

HTML/CSS‑based skills (architecture, infocard) are even simpler: no code block is needed; you write native HTML directly in Markdown and the rendering engine converts it to a visual layer.

Who Is It For?

Suitable for:

Technical writers creating documentation, blogs, or presentation graphics.

Heavy users of AI coding assistants (Claude Code, Cursor, Codex, etc.).

Developers who need quick architecture or flow diagrams.

Engineers doing technical evangelism who require high‑quality visuals.

Less suitable for:

Users demanding extremely high aesthetic control (Figma remains more flexible).

People with no programming background, as basic syntax knowledge is required.

How to Install

The project supports one‑click installation via npx: npx skills add markdown-viewer/skills Claude Code users can also copy the skills directory to ~/.claude/skills/.

Conclusion

The markdown‑viewer/skills project solves a practical problem: turning AI‑generated chart creation from “impossible” into an out‑of‑the‑box capability.

The 13 skills form a complete chain from UML modeling to cloud architecture, from data charts to information cards, each with its own detailed SKILL.md, keeping the learning curve low.

If you frequently need diagrams for technical documents or want your AI coding assistant to produce professional visual output, this open‑source repository is worth bookmarking.

GitHub: https://github.com/markdown-viewer/skills