skills.rest
iani-kuli
iani-kuliCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

diagrams

Generate technical diagrams from text-based markup languages like Mermaid, D2, or PlantUML.

Updated May 5, 2026
Search Tags:#architecture#documentation#mermaid#flowchart#visualization#diagrams
One-click install
npx skills add https://github.com/iani-kuli/harness_bro --skill diagrams-iani-kuli
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: diagrams
Source: https://github.com/iani-kuli/harness_bro/tree/main/.claude/skills/curated/diagrams
Command: npx skills add https://github.com/iani-kuli/harness_bro --skill diagrams-iani-kuli

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill solves the challenge of creating and maintaining technical diagrams that are difficult to version control, review, or update when using traditional GUI-based drawing tools.

Core Features & Use Cases

  • Diagrams-as-Code: Supports Mermaid, D2, PlantUML, Graphviz, and diagrams.py for version-controlled documentation.
  • Tool Selection: Automatically recommends the optimal diagramming tool based on the specific use case (e.g., Mermaid for READMEs, D2 for architecture).
  • Use Case: Quickly generate a sequence diagram for a new API endpoint or a cloud topology map for infrastructure documentation that can be easily reviewed in a pull request.

Quick Start

Use the diagrams skill to generate a Mermaid flowchart representing the user authentication process.

Frequently Asked Questions about diagrams

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

FAQPage Schema
How do I generate architecture diagrams as code for version control?▼

Architecture diagrams as code are generated using text-based markup languages like Mermaid or D2. This ensures version control and maintainability, allowing topology updates to be easily reviewed in pull requests.

Can I use Mermaid to create a sequence diagram for an API endpoint?▼

Mermaid can generate sequence diagrams for API endpoints using simple text-based markup. This approach keeps visual flows version-controlled and easily updatable within standard documentation files.

What is the best way to maintain technical diagrams in a pull request?▼

Maintaining technical diagrams in a pull request is best handled by generating them as code using tools like Mermaid or PlantUML. Text-based markup enables direct review and updates alongside source code changes.

Does this approach work with both D2 and PlantUML for cloud topology maps?▼

This approach works with both D2 and PlantUML to generate cloud topology maps. It automatically recommends the optimal diagramming tool based on your specific use case, ensuring proper vector-based visual outputs.

How do I render text-based markup into vector-based visual outputs?▼

Rendering text-based markup into vector-based visual outputs requires integration with standard rendering tools like Mermaid, D2, or PlantUML. The skill generates the markup, which these tools then process into diagrams.

When should I not use diagrams-as-code for technical documentation?▼

Diagrams-as-code should not be used when you lack integration with standard rendering tools like Mermaid or D2. Without a renderer to process the text-based markup, you cannot produce the required vector-based visual outputs.

Related Skills

Explore More Software Engineering Skills→
cameronraysmithcameronraysmith
14

text-to-visual-iteration

Compile text-based visual specifications into SVG, PNG, and PDF outputs.

Community
Advanced
alessandrobolognaalessandrobologna
1

mermint-markdown-workflow

Convert Markdown Mermaid code blocks into picture markup and paired light/dark SVG assets.

Community
Advanced
cgm-freecgm-free

mermaid

Parse and render Mermaid diagrams within Markdown code blocks.

Community
Advanced
femitzfemitz

paperkit

Integrate cross-platform markup and annotations in Apple apps with PaperKit.

Community
Advanced