skills  by markdown-viewer

Skills for AI agents to generate diagrams and visualizations in Markdown

Created 2 months ago
2,283 stars

Top 19.4% on SourcePulse

GitHubView on GitHub
Project Summary

Summary

This repository provides a set of opinionated "skills" designed to empower AI coding agents with advanced diagramming and visualization capabilities directly within Markdown. It addresses the need for AI agents to generate rich visual content, ranging from simple flowcharts to complex enterprise architecture and data analytics, thereby enhancing technical documentation and communication. The skills extend agent functionality across 15 distinct areas, leveraging 7 different rendering engines.

How It Works

The project implements the Agent Skills format, allowing AI agents to discover and utilize specialized functions for visual content creation. Each skill is a self-contained module with instructions, examples, and syntax rules, enabling agents to generate diagrams by interpreting user requests and translating them into the appropriate markup or configuration for underlying rendering engines like Mermaid, Vega, Graphviz, PlantUML, and custom HTML/CSS templates. This approach centralizes visual generation logic, making it accessible and consistent for AI agents.

Quick Start & Requirements

  • Primary Install: npx skills add markdown-viewer/skills (Recommended for most agents).
  • Manual Installation: Specific instructions are provided for Claude Code, claude.ai, and GitHub Copilot/VS Code environments.
  • Prerequisites: Requires a compatible AI coding agent that supports the Agent Skills format. No other non-default software prerequisites are explicitly listed for the skills themselves.
  • Links:
    • Markdown Viewer Extension: [Link not provided in README, but implied as the rendering engine]
    • Agent Skills Format: [Link not provided in README, but implied standard]
    • Chrome Extension: [Link not provided in README]
    • Firefox Add-on: [Link not provided in README]
    • VS Code Extension: [Link not provided in README]

Highlighted Details

  • Offers 15 distinct skills covering a wide array of diagram types, including flowcharts, data charts, infographics, mind maps, dependency graphs, UML, cloud architecture, network topology, security, enterprise architecture (ArchiMate), BPMN, data analytics, and IoT.
  • Supports 7 core rendering engines: Mermaid, Vega-Lite/Vega, Infographic, Canvas, Graphviz, PlantUML, and direct HTML/CSS embedding.
  • Includes specialized skills with extensive template libraries for enterprise architecture (ArchiMate, Cloud, Network, Security, BPMN, Data Analytics, IoT) powered by PlantUML, and direct HTML/CSS generation for System Architecture and Infocards.
  • Skills are structured with SKILL.md files containing detailed instructions, syntax rules, templates, and examples, facilitating agent integration and user understanding.

Maintenance & Community

The project encourages contributions, outlining a clear process for adding new skills by creating a new folder under skills/ with a SKILL.md file and relevant examples. Links to various extensions (Chrome, Firefox, VS Code) suggest an active ecosystem.

Licensing & Compatibility

  • License: MIT.
  • Compatibility: The MIT license is permissive and generally compatible with commercial use and closed-source linking, allowing for broad adoption.

Limitations & Caveats

The README does not explicitly detail known limitations, alpha/beta status, or specific unsupported platforms. Users should verify compatibility with their specific AI agent implementation and ensure the underlying rendering engines meet their output requirements (e.g., SVG, HTML).

Health Check
Last Commit

5 days ago

Responsiveness

Inactive

Pull Requests (30d)
0
Issues (30d)
0
Star History
2,294 stars in the last 30 days

Explore Similar Projects

Feedback? Help us improve.