block-diagram

Generate D2 block diagrams and render SVG artifacts from text briefs.

11|1|Updated Feb 23, 2026

Search Tags:#automation #architecture #rendering #d2 #diagram #block-diagram #diagram-source

Ready to run

npx skills add https://github.com/jimezsa/opencolab --skill block-diagram

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: block-diagram
Source: https://github.com/jimezsa/opencolab/tree/main/projects/SKILLS/block-diagram
Command: npx skills add https://github.com/jimezsa/opencolab --skill block-diagram

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

Generate accurate, readable D2 block diagrams from a text brief to communicate architecture clearly and deterministically.

Core Features & Use Cases

Canonical D2 source: produce diagrams/<slug>.d2 from a textual description for reproducible diagrams.
Deterministic rendering: default to sketch-style SVG and optional PNG artifacts when requested.
Flexible content: supports LaTeX equation blocks when needed, unlabeled arrows by default, and Telegram file directives when required.
Telegram delivery: optional directives for Telegram file transfer.

Quick Start

Describe your system briefly and I will generate a canonical D2 diagram and the corresponding SVG by default.

Frequently Asked Questions about block-diagram

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

FAQPage Schema

How do I generate D2 block diagrams from a text brief?▼

To generate D2 block diagrams from a text brief, describe your system architecture and the tool will normalize components and edges to write a canonical .d2 source file and render an SVG artifact.

Do I need d2 installed in PATH to render block diagrams?▼

Yes, you need the d2 command-line tool and bash available in your PATH to validate the diagram source and execute the provided render script for generating SVG or PNG artifacts.

Can I include LaTeX equation blocks in a D2 diagram?▼

Yes, you can include LaTeX equation blocks in a D2 diagram when needed. The tool processes text briefs to support LaTeX equations alongside normalized components and edges.

What is the best way to automate architecture diagram rendering for Telegram?▼

Automate architecture diagram rendering for Telegram by generating a D2 block diagram and emitting optional Telegram file directives during the SVG or PNG rendering process.

Does the block diagram generator output both SVG and PNG files?▼

Yes, the block diagram generator defaults to sketch-style SVG output and supports optional PNG artifacts, saving both canonical .d2 and rendered image files under a diagrams directory.