ar-diagram

Translate architecture requests into Mermaid and DrawIO diagrams-as-code files.

1|1|Updated Oct 21, 2024
One-click install
npx skills add https://github.com/yuvarajd85/ai-ml-learnings-exemplars --skill ar-diagram
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ar-diagram
Source: https://github.com/yuvarajd85/ai-ml-learnings-exemplars/tree/main/.claude/skills/ar-diagram
Command: npx skills add https://github.com/yuvarajd85/ai-ml-learnings-exemplars --skill ar-diagram

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Visualize software architectures and cloud infrastructures as code, enabling version-controlled, diffable diagrams rather than hand-drawn sketches.

Core Features & Use Cases

  • Diagrams-as-code outputs in Markdown with Mermaid and a separate DrawIO XML file, enabling rendering on GitHub and diagrams.net.
  • Supports Mermaid, PlantUML, D2, Graphviz, and the Python diagrams library to represent architectures with AWS / GCP / Azure icons.
  • Workflow-guided: clarifies requirements, selects the right tool, generates diagram, and performs basic sanity checks before delivery.
  • Use cases include system diagrams, data pipelines, cloud architectures, and RAG/inference pipelines.

Quick Start

Provide a diagrams-as-code diagram for the requested system using Mermaid (default) and export both a .md and a .drawio file.

Frequently Asked Questions about ar-diagram

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate architecture diagrams as code for cloud infrastructure?

Architecture diagrams as code translate system design requests into Markdown with Mermaid and a DrawIO file. This approach supports AWS, GCP, and Azure icons, enabling version-controlled, diffable diagrams rather than hand-drawn sketches.

What is the best way to create version-controlled system design diagrams?

Creating version-controlled system design diagrams is best achieved using diagrams-as-code. This workflow outputs Markdown and DrawIO files, allowing you to track changes in Git and render architectures directly on GitHub and diagrams.net.

Can I use Mermaid and PlantUML to diagram distributed systems and data pipelines?

Mermaid and PlantUML are supported for diagramming distributed systems and data pipelines. The workflow selects the right tool among Mermaid, PlantUML, D2, Graphviz, and Python diagrams to represent your architecture and exports both .md and .drawio files.

How to diagram a RAG inference pipeline using diagrams-as-code?

To diagram a RAG inference pipeline using diagrams-as-code, provide a description of your system. The workflow clarifies requirements, selects an appropriate tool like Mermaid or Graphviz, generates the diagram, and performs sanity checks before delivering the files.

Does this diagrams-as-code workflow support both DrawIO and Markdown outputs?

This diagrams-as-code workflow supports both DrawIO and Markdown outputs. Each request generates a Markdown file containing a Mermaid diagram and a separate DrawIO .drawio file, enabling rendering across GitHub and diagrams.net platforms.