skills.rest
turbobeest
turbobeestCOMMUNITY
Explore all skills by this author →
GitHub

diagram-renderer

Render DOT/Graphviz files to SVG and open them in the browser.

Updated Aug 27, 2026
Search Tags:#svg#diagram#dot#graphviz#render
One-click install
npx skills add https://github.com/turbobeest/dev-system --skill diagram-renderer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: diagram-renderer
Source: https://github.com/turbobeest/dev-system/tree/main/skills/diagram-renderer
Command: npx skills add https://github.com/turbobeest/dev-system --skill diagram-renderer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires graphviz, and includes scripts (resource) components.

What problem does it solve?

Architects and developers often need rapid visual feedback from DOT/Graphviz diagrams. This Skill automatically renders DOT files to SVG and opens them, dramatically reducing turnaround time during architecture reviews.

Core Features & Use Cases

  • Automatic rendering on DOT file write: Triggers when a .dot is saved.
  • Multiple layouts: dot, neato, fdp, etc., with an output in .claude/rendered-diagrams.
  • Manual usage: Run render_dot.py for custom outputs; supports PNG as fallback.

Quick Start

Save a DOT file (e.g., docs/architecture/context.dot) to auto-render to SVG and open in your browser.

Frequently Asked Questions about diagram-renderer

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

FAQPage Schema
How do I render DOT files to SVG for architecture diagrams?▼

Render DOT files to SVG by saving them to your project; this Skill automatically triggers on write, converts the diagram using Graphviz, and opens the SVG in your browser. Outputs are stored in .claude/rendered-diagrams/ with a PNG fallback if SVG rendering fails.

Can I use Graphviz diagrams with live preview during architecture reviews?▼

Yes. This Skill provides real-time SVG rendering of DOT diagrams on file save, enabling live preview across macOS, Linux, and Windows. Ideal for C4 models and architecture diagrams that need instant visual feedback.

What layout engines does DOT diagram rendering support?▼

DOT rendering supports multiple Graphviz layout engines including dot, neato, and fdp. The Skill automatically applies the appropriate layout and outputs SVG or PNG to .claude/rendered-diagrams/ for browser viewing.

Do I need to manually run commands to preview my DOT diagrams?▼

No. Diagrams render automatically when you save a .dot file. For custom outputs or non-automatic rendering, you can manually run render_dot.py with your chosen parameters.

What happens if SVG rendering fails for my Graphviz diagram?▼

If SVG rendering fails, the Skill falls back to PNG format and outputs it to .claude/rendered-diagrams/. A confirmation message with paths to both source and rendered files is injected to track the conversion.

Can I use this for C4 architecture models written in DOT?▼

Yes. This Skill is designed for Phase 2 Discovery workflows and automatically renders C4 models and other DOT-based architecture diagrams, delivering instant SVG previews in your browser.

Related Skills

Explore More Software Engineering Skills→
mindmorassmindmorass
2

graphviz-diagrams

Create Graphviz diagrams with DOT source and pre-rendered images.

Community
Advanced
jg-chalk-iojg-chalk-io

moai-mermaid-diagram-expert

Render Mermaid diagrams into SVG and PNG images via CLI.

Community
Advanced
spqwspqw

observable-framework-lib-dot

Generate visual diagrams from DOT language in Observable Framework projects.

Community
Intermediate
RobThePCGuyRobThePCGuy
167

patent-diagram-generator

Generate patent-style flowcharts, block diagrams, and architecture diagrams with Graphviz.

Community
Advanced