How Markdown Viewer Skills Enable Claude Code to Generate Professional Charts Directly in Markdown

Overview

Markdown Viewer Agent Skills is a collection of 13 skills that follow the Agent Skills standard, enabling AI coding assistants (Claude Code, Codex, Cursor, etc.) to render professional visualizations directly in Markdown. The skills cover five rendering engines: PlantUML, Vega, JSON Canvas, native HTML/CSS, and Graphviz.

Skill Catalog

Standalone Skills

vega – data‑driven charts (bar, line, scatter, heatmap, radar, word‑cloud) using Vega‑Lite or Vega.

infographic – 70+ pre‑designed KPI, timeline, roadmap, SWOT, funnel, organization‑tree templates written in YAML.

canvas – spatial node graphs for mind‑maps, knowledge graphs, concept maps (JSON Canvas format).

HTML/CSS Embedding Skills

architecture – 13 layouts × 12 styles for layered component diagrams (system layers, micro‑services, enterprise apps).

infocard – magazine‑grade information cards for knowledge summaries, data highlights, announcements (13 layouts × 14 styles).

PlantUML‑Based Skills

uml – 14 UML diagram types + 9,500+ mxgraph icons for software modeling, design patterns, API flows.

cloud – icons for AWS, Azure, GCP, Alibaba Cloud, IBM, OpenStack, Kubernetes.

network – Cisco, Citrix, industry‑standard network device icons.

security – IAM, encryption, firewall, threat‑detection, compliance symbols.

archimate – enterprise‑architecture layers.

bpmn – business process, EIP, value‑stream mapping.

data‑analytics – ETL/ELT pipelines, data‑warehouse, ML workflow diagrams.

iot – IoT devices, sensors, edge‑computing graphics.

Installation

Recommended one‑liner for all supported agents: npx skills add markdown-viewer/skills Manual installation copies a skill directory into ~/.claude/skills/ or places it under .github/skills/ for automatic detection.

Skill Structure

Each skill resides under skills/<skill-name>/ and contains: SKILL.md – detailed agent instructions with YAML front‑matter. examples/ – sample diagrams. references/ – syntax specifications for canvas, vega, infographic. layouts/ – layout templates (architecture, infocard). styles/ – color‑style templates.

Syntax Reference

Supported code fences and output formats: ```vega-lite or ```vega → SVG/Canvas. ```infographic → HTML. ```canvas → SVG. ```plantuml or ```puml → SVG.

HTML/CSS blocks (no fence) for architecture and infocard → HTML.

Usage Example

Generate an ArchiMate monitoring architecture diagram with Claude Code:

/archimate 监控架构设计图
@startuml
!include <archimate/Archimate>
title 监控架构设计图
Grouping(business_layer, "业务层") {
  Business_Actor(ops, "运维人员")
  Business_Role(ops_role, "运维值班")
  Business_Process(incident_mgmt, "事件管理流程")
}
... (rest omitted)
@enduml

The diagram is rendered inline as SVG/HTML within the Markdown view.

Skill Selection Guide

Software Modeling

Process flow, state machine, class diagram, component/deployment diagram, dependency graph → uml (PlantUML activity, state, class, component, deployment, package diagrams).

Data Visualization

Bar/line/scatter, heatmap, radar, word‑cloud → vega (data‑driven charts).

KPI dashboards, timelines, roadmaps, SWOT → infographic (pre‑designed templates).

Content Presentation

Knowledge‑summary cards, data‑highlight cards, announcements → infocard (magazine‑grade layout).

Architecture & Network

Layered system diagrams, micro‑service maps → architecture (grid‑based HTML/CSS).

Enterprise ArchiMate layers → archimate (PlantUML ArchiMate library).

Network topology (LAN/WAN) → network (Cisco/Citrix icons).

Cloud provider diagrams (AWS, Azure, GCP, Alibaba, IBM, OpenStack, Kubernetes) → cloud (provider‑specific PlantUML libraries).

Comparison with fireworks‑tech‑graph

Positioning : markdown‑viewer/skills renders inline diagrams in Markdown for long‑term documentation; fireworks‑tech‑graph generates standalone SVG/PNG from natural‑language prompts.

Core capabilities : 13 skills covering 5 engines vs. 7 visual styles covering 14 UML types with AI/Agent knowledge graphs.

Input method : explicit code fences vs. free‑form natural language.

Output : inline SVG/HTML vs. high‑resolution PNG files.

Rendering engine : PlantUML, Vega, Canvas, Graphviz vs. custom SVG template + rsvg‑convert.

Domain focus : general technical documentation vs. AI/Agent system architecture.

Visual style : basic colors/layouts vs. seven themed styles (Flat, Dark, Blueprint, Notion, Glassmorphism, Claude, OpenAI).

Semantic richness : basic arrows vs. colored/typed arrows indicating read/write/control/async/loop.

Installation : npx skills add markdown-viewer/skills (multi‑agent) vs. npx skills add yizhiyanhua-ai/fireworks-tech-graph (requires rsvg-convert).

Use case : long‑term inline docs vs. rapid polished images for presentations.

Reference Resources

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

PlantUML rendering service: https://www.planttext.com/

Chrome extension for Markdown viewing: https://chromewebstore.google.com/detail/markdown-viewer/jekhhoflgcfoikceikgeenibinpojaoi