skills.rest
agentik-os
agentik-osCOMMUNITY
Explore all skills by this author →
GitHub

diagram

Generate Mermaid or D2 diagrams and render SVG and PNG assets.

10|3|Updated May 26, 2026
Search Tags:#workflow#architecture#mermaid#svg#d2#diagram#diagram-as-code
One-click install
npx skills add https://github.com/agentik-os/OmegaOS --skill diagram-agentik-os
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: diagram
Source: https://github.com/agentik-os/OmegaOS/tree/main/skills/diagram
Command: npx skills add https://github.com/agentik-os/OmegaOS --skill diagram-agentik-os

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Converting vague diagram requests into precise, editable visuals that communicate complex systems clearly and reproducibly.

Core Features & Use Cases

  • Deterministic diagram-as-code: generate accurate diagrams from intent in Mermaid (.mmd) or D2 (.d2) sources.
  • Editable sources + rendered assets: outputs include the diagram source plus rendered SVG/PNG files for easy tweaking and sharing.
  • Lazy-renderer workflow + theming: installs renderers on demand and supports brand-aware theming for consistent visuals across projects.
  • Suitable for architecture, sequence, workflow, ER data models, mindmaps, and timelines in design-creative contexts.

Quick Start

Create a Mermaid or D2 diagram source and run render.sh to produce SVG and PNG assets.

Frequently Asked Questions about diagram

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

FAQPage Schema
How do I generate editable architecture diagrams from text using Mermaid or D2?▼

Diagram-as-code converts text intent into precise visuals using Mermaid or D2 sources, outputting editable source files alongside rendered SVG and PNG assets for architecture, sequence, and ER models.

Can I create sequence diagrams and ER data models using diagram-as-code?▼

Yes, diagram-as-code supports generating sequence, ER data models, architecture, mindmaps, and timelines from Mermaid or D2 sources, rendering them into precise and editable SVG or PNG visual assets.

What is the best way to render D2 or Mermaid sources into SVG and PNG files?▼

Use a lazy-install rendering workflow to render Mermaid or D2 sources into SVG and PNG files, installing renderers on demand and applying brand-aware theming for consistent visual outputs.

Do I need to manually install diagram renderers before generating SVG assets?▼

No, the workflow uses a lazy-install approach that automatically installs necessary diagram renderers on demand, allowing you to generate SVG and PNG assets without manual environment setup.

How does brand-aware theming work for Mermaid and D2 diagrams?▼

Brand-aware theming applies consistent visual styles to Mermaid and D2 diagram sources, ensuring rendered SVG and PNG assets maintain uniform branding across architecture, sequence, and workflow visuals.

Are there limitations when converting complex workflows into diagram-as-code?▼

Diagram-as-code requires translating workflows into structured Mermaid or D2 syntax, meaning highly custom freeform visuals may face constraints, though architecture and sequence models render reproducibly with editable sources.

Related Skills

Explore More Design & Creative Skills→
robertzengcnrobertzengcn

diagram

Convert English descriptions or mermaid source into SVG, PNG, and excalidraw files.

Community
Intermediate
cryborg1211cryborg1211

vc:tech-graph

Generate publish-grade SVG or PNG diagrams from structured data and templates.

Community
Advanced
bennoloefflerbennoloeffler

ai-create-diagram

Generate D2 source and compile it into SVG and PNG diagrams.

Community
Intermediate
GabeujinGabeujin

excalidraw-diagram-generator

Generate Excalidraw diagrams from natural language descriptions as editable .excalidraw JSON files.

Community
Intermediate