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

Ready to run

npx skills add https://github.com/agentik-os/OmegaOS --skill diagram-agentik-os

💬 Prompt for ChatGPT / Claude Chat▼

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.