Markdown Viewer
Use this skill when the user wants a diagram, visualization, architecture view, data chart, technical documentation graphic, infographic, mind map, or editorial-quality content card directly inside Markdown.
Markdown Viewer Agent Skills is an opinionated skill pack for AI coding agents. It covers diagram generation, data visualization, and technical documentation using multiple Markdown-rendered engines, including PlantUML, Vega/Vega-Lite, JSON Canvas, infographic blocks, and direct HTML/CSS embeds.
Setup
If the upstream skill pack is not installed, install it first:
npx skills add markdown-viewer/skills
After installation, prefer reading the specific upstream skill for the requested output type before writing complex diagrams. The pack includes detailed syntax rules, examples, and common pitfalls for each renderer.
Skill Selection
Choose the smallest renderer that fits the user's goal:
| User goal |
Use |
| Bar, line, scatter, heatmap, area, radar, word cloud, or data-driven chart |
vega / vega-lite |
| KPI card, roadmap, timeline, SWOT, funnel, org chart, or structured visual summary |
infographic |
| Free-position mind map, concept map, knowledge graph, or planning board |
canvas |
| System layers, microservices, app/data/infrastructure layers |
architecture |
| Editorial knowledge card, event card, data highlight, or polished content tile |
infocard |
| UML class, sequence, activity, state, component, deployment, package, or use-case diagram |
uml |
| AWS, Azure, GCP, Alibaba Cloud, Kubernetes, serverless, or multi-cloud diagram |
cloud |
| LAN/WAN, data center, enterprise network, or device topology |
network |
| Threat model, zero-trust, IAM, firewall, encryption, or compliance view |
security |
| Enterprise architecture with business/application/technology layers |
archimate |
| BPMN workflow, swim lanes, integration pattern, or value stream map |
bpmn |
| ETL/ELT, warehouse, lakehouse, ML pipeline, or analytics workflow |
data-analytics |
| Sensors, edge computing, smart factory/home, fleet, or digital twin view |
iot |
| Hierarchical brainstorm tree or study outline |
mindmap |
Output Rules
- Write the result in Markdown unless the user asks for a separate file.
- Use the correct code fence for the chosen renderer:
vega-lite or vega for data charts.infographic for infographic YAML blocks.canvas for JSON Canvas maps.plantuml or puml for UML, cloud, network, security, ArchiMate, BPMN, data analytics, IoT, and PlantUML mind maps.
- For
architecture and infocard, embed the HTML/CSS directly in Markdown when that renderer expects raw HTML instead of a code fence.
- Keep diagrams focused. Prefer a clear, accurate first version over decorative complexity.
- Label nodes and edges with domain language the user already used.
- For technical diagrams, include enough structure to be useful in docs: boundaries, data flow, dependencies, trust zones, layers, or ownership where relevant.
- For data visualizations, include explicit sample data or use the data the user supplied. Do not invent real metrics without marking them as placeholders.
- For security or compliance diagrams, avoid implying guarantees. Show controls, boundaries, and risks factually.
Workflow
- Identify the user's artifact type: chart, diagram, architecture, process, mind map, infographic, or card.
- Select the renderer from the guide above.
- If the pack is installed locally, read the corresponding upstream
SKILL.md for exact syntax and pitfalls.
- Draft the Markdown artifact with the correct code fence or raw HTML/CSS style.
- Check syntax before delivery: matching fences, valid JSON/YAML where required, PlantUML starts and ends correctly, and labels are readable.
- If the user needs a file, save it as
.md and include only the final artifact plus concise notes.
Delivery
When finished, tell the user:
- which renderer or sub-skill you used;
- where the Markdown file is, if one was created;
- any placeholder data or assumptions;
- any viewer requirement, such as needing a Markdown Viewer extension or compatible renderer.
Do not use static screenshots when the user asked for Markdown-native visuals. The value of this skill is that the output stays editable, reviewable, and renderable from Markdown.
1---2name: markdown-viewer3description: Create rich diagrams, data visualizations, technical architecture views, and editorial content cards directly in Markdown using the Markdown Viewer Agent Skills pack. Use for Mermaid-like diagram requests, PlantUML architecture diagrams, Vega charts, JSON Canvas maps, infographics, UML, cloud/network/security/data/IoT diagrams, and polished Markdown documentation visuals.4license: MIT5---67# Markdown Viewer89Use this skill when the user wants a diagram, visualization, architecture view, data chart, technical documentation graphic, infographic, mind map, or editorial-quality content card directly inside Markdown.1011Markdown Viewer Agent Skills is an opinionated skill pack for AI coding agents. It covers diagram generation, data visualization, and technical documentation using multiple Markdown-rendered engines, including PlantUML, Vega/Vega-Lite, JSON Canvas, infographic blocks, and direct HTML/CSS embeds.1213## Setup1415If the upstream skill pack is not installed, install it first:1617```bash18npx skills add markdown-viewer/skills19```2021After installation, prefer reading the specific upstream skill for the requested output type before writing complex diagrams. The pack includes detailed syntax rules, examples, and common pitfalls for each renderer.2223## Skill Selection2425Choose the smallest renderer that fits the user's goal:2627| User goal | Use |28| --- | --- |29| Bar, line, scatter, heatmap, area, radar, word cloud, or data-driven chart | `vega` / `vega-lite` |30| KPI card, roadmap, timeline, SWOT, funnel, org chart, or structured visual summary | `infographic` |31| Free-position mind map, concept map, knowledge graph, or planning board | `canvas` |32| System layers, microservices, app/data/infrastructure layers | `architecture` |33| Editorial knowledge card, event card, data highlight, or polished content tile | `infocard` |34| UML class, sequence, activity, state, component, deployment, package, or use-case diagram | `uml` |35| AWS, Azure, GCP, Alibaba Cloud, Kubernetes, serverless, or multi-cloud diagram | `cloud` |36| LAN/WAN, data center, enterprise network, or device topology | `network` |37| Threat model, zero-trust, IAM, firewall, encryption, or compliance view | `security` |38| Enterprise architecture with business/application/technology layers | `archimate` |39| BPMN workflow, swim lanes, integration pattern, or value stream map | `bpmn` |40| ETL/ELT, warehouse, lakehouse, ML pipeline, or analytics workflow | `data-analytics` |41| Sensors, edge computing, smart factory/home, fleet, or digital twin view | `iot` |42| Hierarchical brainstorm tree or study outline | `mindmap` |4344## Output Rules4546- Write the result in Markdown unless the user asks for a separate file.47- Use the correct code fence for the chosen renderer:48 - `vega-lite` or `vega` for data charts.49 - `infographic` for infographic YAML blocks.50 - `canvas` for JSON Canvas maps.51 - `plantuml` or `puml` for UML, cloud, network, security, ArchiMate, BPMN, data analytics, IoT, and PlantUML mind maps.52- For `architecture` and `infocard`, embed the HTML/CSS directly in Markdown when that renderer expects raw HTML instead of a code fence.53- Keep diagrams focused. Prefer a clear, accurate first version over decorative complexity.54- Label nodes and edges with domain language the user already used.55- For technical diagrams, include enough structure to be useful in docs: boundaries, data flow, dependencies, trust zones, layers, or ownership where relevant.56- For data visualizations, include explicit sample data or use the data the user supplied. Do not invent real metrics without marking them as placeholders.57- For security or compliance diagrams, avoid implying guarantees. Show controls, boundaries, and risks factually.5859## Workflow60611. Identify the user's artifact type: chart, diagram, architecture, process, mind map, infographic, or card.622. Select the renderer from the guide above.633. If the pack is installed locally, read the corresponding upstream `SKILL.md` for exact syntax and pitfalls.644. Draft the Markdown artifact with the correct code fence or raw HTML/CSS style.655. Check syntax before delivery: matching fences, valid JSON/YAML where required, PlantUML starts and ends correctly, and labels are readable.666. If the user needs a file, save it as `.md` and include only the final artifact plus concise notes.6768## Delivery6970When finished, tell the user:7172- which renderer or sub-skill you used;73- where the Markdown file is, if one was created;74- any placeholder data or assumptions;75- any viewer requirement, such as needing a Markdown Viewer extension or compatible renderer.7677Do not use static screenshots when the user asked for Markdown-native visuals. The value of this skill is that the output stays editable, reviewable, and renderable from Markdown.
ekkolearnai