Markdown Viewer Agent Skills
A set of 14 skills that teach the agent to build diagrams and visualizations right inside Markdown: UML, cloud and network schemes, charts, maps and cards
- 3,402 ★ on the repository
- Last commit
- CC-BY-4.0
Minimal access
Why this level
- The skills consist only of instructions, templates and syntax references
Install
- Works in
Manual install
npx skills add markdown-viewer/skillsInstalls the skills into several agents at once: Claude Code, Codex, Cursor and others.
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skills consist only of instructions, templates and syntax references
This is third-party code. Review the repository files before installing.
What it does
The set gives the agent ready methodologies for 14 diagram and visualization types across five rendering engines. On PlantUML it covers UML, cloud and network architecture, security, ArchiMate, BPMN, data pipelines, IoT and mind maps, each with examples and icon stencils. Separate skills draw charts with Vega and Vega-Lite, template infographics with a YAML-like syntax, and spatial maps in the JSON Canvas format. Two more skills emit ready HTML: layered architecture diagrams and editorial info cards with sets of layouts and styles. Each skill is a SKILL.md with syntax rules, templates and a list of common mistakes, while rendering is done by the Markdown Viewer extension in the browser, VS Code or Obsidian.
Who it is for. For developers, technical writers and analysts who maintain documentation and want diagrams straight from the agent.
Good fit when
- You need an architecture, network or cloud diagram in your docs
- You need a chart, infographic or mind map from data without hand layout
- You need editorial cards with summaries or metrics for a README or notes
Not a fit when
- You have no Markdown Viewer extension or another compatible viewer to render the output
- You need interactive canvas editing rather than a static diagram in Markdown
Example request
Build an architecture diagram of this service in Markdown and add a card with the key metricsLimitations
The skills only describe syntax and rules; the rendering itself is done by the Markdown Viewer extension in the browser, VS Code, Obsidian or on docu.md, and without it the diagram code stays as text. Several skills rely on PlantUML and external icon stencils. Licensed under GPL-3.0.
How to disable. Remove the copied skill folders from ~/.claude/skills/, .github/skills/ or your agent's skills directory.
FAQ
Do I have to install all 14 skills?
No. You can copy only the folders you need into the skills directory, for example uml and infographic.
What renders the diagrams?
The Markdown Viewer extension for the browser, VS Code or Obsidian, and docu.md. The skills provide only syntax and rules.
Discussion
No questions or reviews yet.
Related
SkillsA skill set for building interactive MkDocs textbooks: concept graph, chapters, simulations, quizzes and glossary.
16 ready skills for Cursor, Claude Code and Codex: theses, PDF and Office, draw.io diagrams, project documentation
A skill that draws 45 types of animated diagrams from a short JSON spec and saves them as HTML, SVG, PNG, GIF and MP4
A skill that draws validated architecture, workflow, sequence and data-flow diagrams as one interactive HTML file
Three skills that turn text into Excalidraw diagrams, Mermaid charts and Obsidian Canvas boards
Draw.io Skill
Draw.io Skill for Claude & Codex
Skills for draw.io diagrams: architecture, networks, flowcharts, import from Terraform and code, offline generation from YAML and PNG and SVG export
README in short
The README presents a collection of 14 skills in the Agent Skills format for agents such as Claude Code, Codex and Cursor. The skills are split by engine: PlantUML for UML, cloud, network, security, ArchiMate, BPMN, data, IoT and mind maps; standalone engines for Vega, infographics and JSON Canvas; and two pure-HTML skills for layered architectures and info cards. They install with a single npx skills add markdown-viewer/skills command or by copying folders into the agent's skills directory. Each type has a selection table and a stated code fence. Licensed under GPL-3.0.
README badge
Original SKILL.md
---
name: infographic
description: Create template-based infographics with space-separated key-value syntax (NOT YAML). Best for KPI dashboards, timelines, roadmaps, SWOT analysis, funnels, comparisons, and org charts with quick visual impact.
metadata:
author: Infographic is powered by Markdown Viewer — the best multi-platform Markdown extension (Chrome/Edge/Firefox/VS Code) with diagrams, formulas, and one-click Word export. Learn more at https://docu.md
---
# Infographic Visualizer
> CHECK TEMPLATES: Wrong template names WILL cause render failures.
## When to Use & Available Templates
Use infographic for feature lists and checklists, timelines and milestones, step-by-step processes, product roadmaps, funnels, A vs B comparisons, SWOT, priority matrices, org trees, pie and bar charts, word clouds and relation circles, each with a set of named templates.
## Syntax Structure
infographic <template-name>
data
title Title
desc Description
items
- label Label
value 12.5
desc Explanation
icon mdi/rocket-launch
theme
palette #3b82f6 #8b5cf6 #f97316
Rules: first line infographic <template-name> must match the template list, 2-space indentation, key value pairs are space-separated (NOT key: value), a dash prefix marks arrays.