markdown-viewer/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.

What it solves

This project provides a set of "skills" for AI agents (such as Claude Code, Cursor, and GitHub Copilot) to help them generate high-quality, professional visuals—such as architecture diagrams, charts, and infographics—directly within Markdown. It bridges the gap between an agent's ability to write text and its ability to create structured visual documentation using specific rendering engines.

How it works

The project is organized as a skill package (documd-visuals) that follows the Agent Skills format. It acts as a router that guides an AI agent through 31 different goal domains (e.g., software design, cloud architecture, business reporting) and 183 scenarios.

When an agent receives a request, it uses the SKILL.md router to match the user's intent to a specific goal domain and then selects the appropriate rendering engine based on the scenario:

  • PlantUML/puml: For UML, ArchiMate, BPMN, and network/security architecture.
  • Vega/Vega-Lite: For data-driven charts with statistical transforms.
  • ECharts: For report-grade dashboards and gauges.
  • Infographic: For template-driven roadmaps and comparisons.
  • HTML/CSS: For system architecture diagrams and page layouts.

An optional documd CLI tool is also available to export these Markdown-based visuals into finished files like PDF, DOCX, or SVG.

Who it’s for

  • AI Agent users: Those using coding agents to generate technical documentation.
  • Technical writers: People who want to maintain visuals as text-in-Markdown for easier version control.
  • Developers: Engineers who need to generate complex system diagrams and architecture maps quickly via AI.

Highlights

  • Extensive Library: Includes 242 verified examples across 31 goal domains.
  • Agent-Ready: Specifically designed for integration with AI coding agents via npx skills add.
  • Multi-Engine Support: Integrates five distinct rendering engines to cover everything from UML to infographics.
  • Thematic Styling: Supports nine different themes to ensure visual consistency and contrast.
  • Export Capability: Provides a CLI for converting Markdown visuals into professional document formats.

Related

  • Project
    xstongxue/best-skills

    A collection of high-quality SKILL.md files for AI agents (Cursor, Claude Code, etc.) that enable automatic task triggering for academic writing, diagramming, and development workflows.

  • Project
    QingYunA/answer-me-with-html

    An agent skill that converts concise AI-generated Markdown drafts into structured, visual HTML pages and explainer videos, reducing token costs and latency.

  • Project
    kangarooking/kangarooking-skills

    A collection of structured, open-source Agent Skills compatible with the Agent Skills standard, providing reusable workflows for content creation, image generation, and AI project engineering.

  • Project
    OneWave-AI/claude-skills

    A library of 229 production-ready, single-file skills for AI agents to automate complex tasks across engineering, business operations, and design.

  • Project
    coleam00/skills

    A library of 35 modular markdown-based skills and hooks for AI coding agents to standardize development workflows and reduce prompt bloat.