Markdown Viewer Agent Skills
Opinionated skills for AI coding agents to create stunning diagrams and visualizations directly in Markdown.
- Source repo
- markdown-viewer/skills
- Stars
- ★ 3.4k
- Last updated
- 13d ago
- License
- CC-BY-4.0
- Primary language
- JavaScript
- FA score
- 39/100 · Major gaps
At a glance
- How it runs
- Works with
- Universal · cross-platformCodex · Claude CodeChatGPT · Claude.ai (Partial support)
- Cost
- Free, no paid service needed
- Setup effort
- Low · running in minutes
- You'll need
- Typical use
- A software developer uses the
umlskill to create sequence diagrams or state machine diagrams in Markdown for API documentation. - Not a fit if
- Teams needing fully offline rendering; skills rely on external engines like PlantUML and Vega-Lite
- Users of Markdown viewers without HTML/CSS embedding, where architecture and infocard may not render
- Proprietary products needing permissive licensing, since GPL-3.0 may impose copyleft obligations
- Source review
- 39/100 · Major gaps 8 safety controls not found
What does this agent do, and when should you use it?
Markdown Viewer Agent Skills is a collection of 14 skills that extend AI coding agents' capabilities in diagram generation, data visualization, and technical documentation. The skills follow the Agent Skills format and cover 5 rendering engines: PlantUML, Vega-Lite/Vega, HTML/CSS, JSON Canvas, and YAML. They include PlantUML-based skills for UML, cloud architecture, network topology, security, ArchiMate, BPMN, data analytics, and IoT; standalone skills such as vega (data-driven charts), infographic (70+ templates), and canvas (mind maps); and HTML/CSS-embedded skills like architecture (13 layouts × 12 styles) and infocard (13 layouts × 14 styles). The repository provides a quick install command (npx skills add markdown-viewer/skills) and manual installation instructions for Claude Code, claude.ai, and GitHub Copilot/VS Code. It is licensed under GPL-3.0.
The repository provides a catalog of skills, each containing a SKILL.md file with instructions, code fences, templates, layouts, and styles. Skills use specific code fences (e.g., ``vega-lite, `plantuml, `canvas) to trigger rendering. The quick install command npx skills add markdown-viewer/skills installs the skills into AI-compatible agents. For Claude Code, users can manually copy skills to ~/.claude/skills/. For GitHub Copilot/VS Code, skills are placed in .github/skills/` and auto-detected. The skills guide the agent to generate diagrams based on user requirements (e.g., a bar chart using the vega-lite fence) and use the syntax rules in the SKILL.md. Output formats are typically SVG or HTML, embedded in Markdown. The architecture and infocard skills generate raw HTML/CSS without a code fence. The collection also includes a skill selection guide and a hierarchy diagram.
- A software developer uses the
umlskill to create sequence diagrams or state machine diagrams in Markdown for API documentation. - A data scientist uses the
vegaskill to generate interactive data charts, such as scatter plots or heatmaps, in a Jupyter notebook. - An enterprise architect uses the
archimateskill to create ArchiMate layered models representing business, application, and technology layers. - A cloud engineer uses the
cloudskill to draw AWS or Azure architecture diagrams for design reviews or presentations. - A technical writer uses the
infocardskill to craft editorial-style information cards for release notes or data summaries. - A business analyst uses the
bpmnskill to model workflows and business processes, including enterprise integration patterns.
How do you install or deploy this agent?
Recommended: run npx skills add markdown-viewer/skills in your project directory. This works with multiple AI coding agents (Claude Code, Codex, Cursor, etc.).
Manual installation:
- For Claude Code: copy the skills/<skill-name> directory to ~/.claude/skills/.
- For claude.ai: add skills to project knowledge or paste SKILL.md contents into the conversation.
- For GitHub Copilot / VS Code: place skills in .github/skills/ directory; they are automatically detected.
Requirements: Node.js (for npx). No other explicit dependencies.
How do you use this agent?
- Identify the diagram type from user requirements (e.g., flowchart, bar chart, cloud architecture).
- Read the corresponding skill's SKILL.md file (e.g.,
skills/uml/SKILL.md) for detailed instructions. - Follow the syntax rules carefully to avoid render failures.
- Use the code fence specified by the skill (e.g., ``
plantuml for UML,`vega-lite for Vega-Lite,`infographic for infographics,``canvas for mind maps). - The agent generates the diagram code, which renders as SVG or HTML, embedded in the Markdown.
What are this agent's strengths and limitations?
- Comprehensive collection of 14 skills covering a wide range of diagram types, from UML to cloud architecture to infographics.
- Standardized skill format (Agent Skills) easy to install into Claude Code, Codex, Cursor, and others.
- Rich templates and icons (e.g., 9500+ mxgraph stencils) enabling professional-quality diagrams.
- Code fence-driven, enabling direct embedding in Markdown, integrated with the Markdown Viewer extension.
- Licensed under GPL-3.0, which may impose copyleft obligations if integrated into proprietary products.
- Dependency on external rendering engines (PlantUML, Vega-Lite) and the Markdown Viewer extension, which may not be universally available.
- HTML/CSS skills (architecture, infocard) may not render in all Markdown viewers, limiting portability.
- The skills are provided as-is without dedicated support or maintenance guarantees.
How does this agent compare with similar options?
The repository does not explicitly compare to alternatives, but it can be compared to other diagram generation tools like Mermaid or PlantUML itself.
Key facts side by side with the most closely related agents.
| Agent | Source review | Form / cost | Stars | Updated | Language | Full support on |
|---|---|---|---|---|---|---|
| Markdown Viewer Agent Skills This agent | 39 · Major gaps | Agent plugin / skillFree | ★ 3.4k | 13d ago | JavaScript | Codex · Claude Code |
| PaperBanana — Automated Academic Illustration Tool | 52 · Major gaps | CLIFree + model costs | ★ 2.4k | 1mo ago | Python | Claude Code · OpenAI API |
| PR Lens | 61 · Some gaps | Agent plugin / skillFreemium | ★ 2.1k | 1d ago | TypeScript | Codex |
| DevAll | 41 · Major gaps | CLIFree + model costs | ★ 35k | 2d ago | Python | — |
How does FollowAgents rate this agent?
Why each dimension lost points
Evidence shows no documentation of permissions, user confirmation, data flow, or sensitive data handling. The install command `npx skills add` executes external code without explaining its permissions or impact. No dependency security or external effects are mentioned. No rollback mechanism is provided. Source attribution is only via author field in README and contributing guide, but not verified. Hence all trust criteria score 0.
Self-consistency: README's skill list, code fences, and descriptions are consistent, and skill structure is clearly explained, scoring 2. Dependency availability: Relies on external rendering engines (e.g., PlantUML, Vega) but no versions or installation instructions are provided, scoring 1. Failure messages: SKILL.md mentions common pitfalls but lacks specific error handling or recovery steps, scoring 1.
Audience and scenarios: README provides a detailed skill selection guide covering many use cases, scoring 2. Capability boundaries: Clearly lists each skill's functionality and best use, scoring 2. Trigger precision: Provides code fence reference but does not specify trigger conditions or priority, scoring 2. Environment fit: Supports multiple AI agents and editors but does not state system requirements or compatibility limitations, scoring 2.
Information architecture: README is well-structured with navigation and skill tables, scoring 2. Install notes: Provides quick and manual installation steps, scoring 2. Naming stability: Skill names and code fences are consistent, scoring 2. Examples and FAQ: Provides examples and common pitfalls but no FAQ, scoring 2. Known limitations: No explicit limitations listed, scoring 1. License: Clearly GPL-3.0, scoring 2. Versioning and changelog: No version number or changelog, scoring 0. Maintenance responsibility: Contributing guide exists but no clear maintainer or update policy, scoring 1.
Output usability: Skills aim to generate diagrams and visualizations directly embeddable in Markdown, with clear output formats, scoring 2. Marginal value: Provides 14 skills covering many scenarios, offering high value, scoring 2. Cost-benefit: Low installation and usage cost, but reliance on external engines may add complexity, scoring 2.
Claim traceability: Claims in README (e.g., number of skills, template counts) lack sources or verification, scoring 1. Cross-source corroboration: No external validation or test results provided, scoring 1. Fact-inference separation: Descriptions and inferences are mixed without clear distinction, scoring 1.
- Not found in source: least-privilege scopingGrant only what the task needs: a dedicated account or read-only token, scoped to specific directories and repos.
- Not found in source: confirmation before actingTurn on (or add) a confirmation step before it acts, and try it in a sandbox or test environment before real data.
- Not found in source: data-flow disclosureWatch which external services it contacts (proxy or firewall logs) and keep sensitive data out until you know where it goes.
- Not found in source: sensitive-data handlingUse dedicated, low-privilege, revocable API keys — never production credentials — and keep secrets out of logs.
- Not found in source: dependency securityPin versions and run a dependency audit (npm audit, pip-audit) before installing; prefer running it in a container.
- Not found in source: disclosed external effectsEstablish which external systems it writes to, sends to or changes, and verify with test accounts or repos before production.
- Not found in source: rollback or recovery pathBack up first, or work on a git branch or snapshot, so its changes can be undone.
- Not found in source: verifiable attributionInstall from the official repo or registry and check the publisher and URL to avoid look-alike packages.
- The repository provides no security or permission documentation; the install command may execute external code, posing potential risks.
- Relies on external rendering engines without version or installation instructions, which may cause environment inconsistencies.
- No version number or changelog is provided, making it difficult to track updates and compatibility.
- Known limitations are not explicitly listed, so users may encounter unforeseen failures.