skills
Opinionated skills for AI coding agents to create stunning diagrams and visualizations directly in Markdown. These skills extend agent capabilities across diagram generation, data visualization, and technical documentation.
The Markdown Viewer Agent Skills collection provides 14 specialized skills that enable AI coding agents to create diagrams, visualizations, and technical documentation directly in Markdown. Built for agents like Claude Code, Cursor, and GitHub Copilot, these skills cover five rendering engines including PlantUML, Vega, JSON Canvas, and HTML/CSS. The skills span software modeling (UML), cloud architecture (AWS, Azure, GCP), data visualization, business processes (BPMN), security diagrams, and editorial-quality content cards, with over 9,500 stencil icons and 70+ pre-designed templates.
Key Features
Use Cases
- 01Generating UML diagrams for software design patterns, API flows, class hierarchies, and state machines during development
- 02Creating cloud infrastructure diagrams for AWS, Azure, GCP, Kubernetes, and multi-cloud architectures
- 03Building data pipeline visualizations for ETL/ELT workflows, data warehouses, and ML model pipelines
- 04Designing network topology diagrams for LAN/WAN, enterprise networks, and data center infrastructure
- 05Producing security architecture diagrams including threat models, zero-trust designs, and compliance flows
- 06Generating business process diagrams using BPMN notation, enterprise integration patterns, and value stream mapping
Related Skills
View moresuperpowers
An agentic skills framework & software development methodology that works.
skills
Skills for Real Engineers. Straight from my .agents directory.
skills
Public repository for Agent Skills
ponytail
Makes your AI agent think like the laziest senior dev in the room. The best code is the code you never wrote.
skills — FAQ
What are Markdown Viewer Agent Skills?+
A collection of 14 specialized skills that extend AI coding agents' ability to generate diagrams, visualizations, and technical documentation directly in Markdown using five different rendering engines (PlantUML, Vega, JSON Canvas, HTML/CSS, and infographic templates).
How do I install these skills for Claude Code?+
Use the quick install command 'npx skills add markdown-viewer/skills' which works with Claude Code and other AI agents. For manual installation, copy individual skill folders from 'skills/<skill-name>' to '~/.claude/skills/'.
Which AI coding agents support these skills?+
The skills work with Claude Code, Codex, Cursor, GitHub Copilot (when placed in '.github/skills/' directory), and claude.ai (added to project knowledge). They follow the standard Agent Skills format for broad compatibility.
Do I need API keys or the Markdown Viewer extension?+
No API keys are required. The skills generate standard Markdown code blocks that can be rendered by the Markdown Viewer extension (available for Chrome, Edge, Firefox, VS Code, and Obsidian) or other compatible renderers.
Are these skills free to use?+
Yes, the skills are open source under the GPL-3.0 license and available for free from the GitHub repository.
What's the difference between PlantUML skills and standalone skills?+
PlantUML skills (UML, cloud, network, security, BPMN, etc.) use the PlantUML diagramming engine with domain-specific icons, while standalone skills like Vega use data-driven charting, Canvas uses spatial node maps, and HTML/CSS skills embed styled components directly in Markdown without code fences.
How do I install skills?+
Open the source repository on GitHub and follow its README. skills is a skill — MCP Agents Market links you directly to the official repo.
Is skills free?+
skills is an open-source project hosted on GitHub. Check the repository for its license and any usage requirements.