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
Low risk
We rate an entry low when it mostly gives the agent instructions and reference material.
Why this level
- The skills consist only of instructions, templates and syntax references
Install
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/markdown-viewer-agent-skillsDetects the agents on your machine, checks the risk and pins the version.
Other ways to install
Run in a terminal in the project folder
npx skills add markdown-viewer/skills --skill documd-visuals -a claude-code -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit b7ff18a
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/markdown-viewer/skills.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /documd-visuals/
git -C "$tmp" checkout b7ff18a95203521630da14cf4d6b32f794ac663a
mkdir -p .claude/skills
cp -R "$tmp/documd-visuals" .claude/skills/documd-visualsCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add markdown-viewer/skills --skill documd-visuals -a cursor -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit b7ff18a
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/markdown-viewer/skills.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /documd-visuals/
git -C "$tmp" checkout b7ff18a95203521630da14cf4d6b32f794ac663a
mkdir -p .agents/skills
cp -R "$tmp/documd-visuals" .agents/skills/documd-visualsCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add markdown-viewer/skills --skill documd-visuals -a github-copilot -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit b7ff18a
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/markdown-viewer/skills.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /documd-visuals/
git -C "$tmp" checkout b7ff18a95203521630da14cf4d6b32f794ac663a
mkdir -p .github/skills
cp -R "$tmp/documd-visuals" .github/skills/documd-visualsCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add markdown-viewer/skills --skill documd-visuals -a codex -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit b7ff18a
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/markdown-viewer/skills.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /documd-visuals/
git -C "$tmp" checkout b7ff18a95203521630da14cf4d6b32f794ac663a
mkdir -p .agents/skills
cp -R "$tmp/documd-visuals" .agents/skills/documd-visualsCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add markdown-viewer/skills --skill documd-visuals -a gemini-cli -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit b7ff18a
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/markdown-viewer/skills.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /documd-visuals/
git -C "$tmp" checkout b7ff18a95203521630da14cf4d6b32f794ac663a
mkdir -p .agents/skills
cp -R "$tmp/documd-visuals" .agents/skills/documd-visualsCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/markdown-viewer/skills.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /documd-visuals/
git -C "$tmp" checkout b7ff18a95203521630da14cf4d6b32f794ac663a
mkdir -p .devin/skills
cp -R "$tmp/documd-visuals" .devin/skills/documd-visualsCommands for macOS and Linux, on Windows run them in Git Bash.
Formerly Windsurf.
Run in a terminal in the project folder
npx skills add markdown-viewer/skills --skill documd-visuals -a cline -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit b7ff18a
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/markdown-viewer/skills.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /documd-visuals/
git -C "$tmp" checkout b7ff18a95203521630da14cf4d6b32f794ac663a
mkdir -p .cline/skills
cp -R "$tmp/documd-visuals" .cline/skills/documd-visualsCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add markdown-viewer/skills --skill documd-visuals -a roo -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit b7ff18a
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/markdown-viewer/skills.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /documd-visuals/
git -C "$tmp" checkout b7ff18a95203521630da14cf4d6b32f794ac663a
mkdir -p .roo/skills
cp -R "$tmp/documd-visuals" .roo/skills/documd-visualsCommands for macOS and Linux, on Windows run them in Git Bash.
A fork of Roo Code, same .roo folders.
Run in a terminal in the project folder
npx skills add markdown-viewer/skills --skill documd-visuals -a opencode -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit b7ff18a
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/markdown-viewer/skills.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /documd-visuals/
git -C "$tmp" checkout b7ff18a95203521630da14cf4d6b32f794ac663a
mkdir -p .agents/skills
cp -R "$tmp/documd-visuals" .agents/skills/documd-visualsCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/markdown-viewer/skills.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /documd-visuals/
git -C "$tmp" checkout b7ff18a95203521630da14cf4d6b32f794ac663a
mkdir -p .agents/skills
cp -R "$tmp/documd-visuals" .agents/skills/documd-visualsCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/markdown-viewer/skills.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /documd-visuals/
git -C "$tmp" checkout b7ff18a95203521630da14cf4d6b32f794ac663a
mkdir -p .agents/skills
cp -R "$tmp/documd-visuals" .agents/skills/documd-visualsCommands for macOS and Linux, on Windows run them in Git Bash.
Install the skills: npx skills add markdown-viewer/skills. Or copy the folder you need from skills/ into the skills directory, for example cp -r skills/uml ~/.claude/skills/. Install the Markdown Viewer extension to view the results.
Other ways from the author
npx skills add markdown-viewer/skillsInstalls the skills into several agents at once: Claude Code, Codex, Cursor and others.
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.
Security check
- The skills consist only of instructions, templates and syntax references
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.
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.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.
Related
Microsoft's utility and MCP server that turn PDF, Word, Excel, PowerPoint, HTML and other files into Markdown for models
Anthropic skills
Skills
Anthropic's official skill examples: docx, pdf, pptx and xlsx documents, design, MCP builder and the Agent Skills spec
A skill that builds editable PPTX decks from PDF, DOCX, URLs and Markdown with native shapes, charts and animations
A skill that draws editorial diagrams as standalone HTML and SVG files: architecture, flowcharts, ER, funnels and about forty more types