Best For
Anyone who needs diverse, high-quality diagram generation in Claude Code workflows. Specifically:
- Engineers and researchers writing technical documentation, academic papers, or research reports
- People who have used Mermaid but need broader diagram language coverage (PlantUML, Vega, Architecture)
- Architects who need enterprise-grade UML (9,500+ mxgraph icons, ArchiMate, BPMN)
- Product managers or executives who want KPI cards, timelines, roadmaps, and SWOT diagrams quickly
If you only need simple flowcharts, a Mermaid skill is sufficient. If your diagram needs span multiple types and rendering engines, this 14-skill package provides the widest diagram coverage currently available in the Claude Code ecosystem.
How I Actually Use It
Mermaid covers a useful range of diagram types, but it has a ceiling. Complex UML, data visualization, and enterprise architecture diagrams are not its strengths. markdown-viewer/skills fills those gaps.
The 5-engine coverage is the key differentiator:
- Vega-Lite/Vega: Interactive data charts (scatter, bar, heatmap)
- PlantUML covers 14 UML types with 9,500+ mxgraph stencil icons, including Security threat models, BPMN workflows, and ArchiMate enterprise architecture
- JSON Canvas handles spatial mind maps in Obsidian Canvas format
- HTML/CSS embed produces architecture layer diagrams and information cards as browser-ready HTML
- Infographic YAML ships with 70+ preset templates: KPI cards, timelines, roadmaps, SWOT, funnels in one instruction
Install in one line: npx skills add markdown-viewer/skills. Compatible with Claude Code, Codex, Cursor, and GitHub Copilot. Zero conflict with existing skill infrastructure.
Where It Is Strong
- 5 rendering engines, 14 skills: Data charts through enterprise architecture diagrams, far beyond Mermaid's scope
- 70+ infographic preset templates out of the box: KPI, timeline, roadmap, SWOT, funnel diagrams
- PlantUML brings enterprise breadth with 9,500+ mxgraph stencil icons, ArchiMate, BPMN, Security threat models
- One-line install works across Claude Code, Codex, Cursor, and GitHub Copilot
- MIT licensed, zero conflict with existing tools. Supplements rather than replaces.
Where It Fails
- Vega and PlantUML each have their own syntax; complex diagrams require at least basic familiarity.
- Unlike diagram-design, this package does not auto-extract a website's color system. Color specification is manual.
- The 70+ templates are the strength, but highly custom layouts still require manual HTML/CSS adjustment.
Pricing, Difficulty, and Risk
Free and open source under MIT. Low difficulty — after installation, tell Claude which diagram type you need and the skill handles engine details. Advanced Vega usage requires syntax knowledge, but basic diagrams need no additional learning.
Verdict
The biggest diagram tooling gap-fill for Claude Code users. Mermaid handles simple flows, diagram-design handles visual quality requirements, and markdown-viewer/skills covers the middle range: complex UML, data visualization, enterprise architecture, rapid infographics.
The three diagram tools occupy distinct positions. Installing markdown-viewer/skills creates no conflict with existing tools and fills a workflow gap that previously had to be solved outside Claude Code.