---

name: dot-export description: Export DOT/Graphviz diagrams from documents to SVG images. Use after creating documents with DOT code blocks when you need to render them as static images for distribution, GitHub, wikis, or static sites. Supports multiple layout engines (dot, neato, circo, fdp, twopi, osage, patchwork). Processes .md, .html, .mdx, .rst, .adoc files. allowed-tools: Bash, Read, Write, Edit

DOT/Graphviz Diagram Export Skill

Automatically render DOT/Graphviz diagrams in documents to SVG images using the dot-renderer tool.

---

Tool Location

Copy~/.claude/tools/dot-renderer/
├── render-dot.js         # Single diagram renderer
└── process-document.js   # Full document processor

---

Workflow

Step 1: Create Document with DOT Diagrams

When creating a document with DOT diagrams, use the standard DOT syntax in code blocks:

Copy# My Document

Here's the graph:

```dot
digraph G {
    rankdir=LR
    A [label="Start"]
    B [label="Process"]
    C [label="End"]
    A -> B -> C
}

More content...

Copy
### Step 2: Export Diagrams to SVG

After creating/editing a document with DOT blocks, run:

```bash
node ~/.claude/tools/dot-renderer/process-document.js <document-path> --verbose

Options:

• --layout=<engine> - Force layout engine for all diagrams: dot, neato, circo, fdp, twopi, osage, patchwork
• --verbose - Show detailed progress
• --dry-run - Preview without making changes

Step 3: Result Structure

The tool will:

1. Extract all DOT code blocks (\``dot, ```graphviz, or ```gv`)
2. Render each to SVG in diagrams/{document-name}/
3. Replace the code block with an image reference
4. Preserve original code in a comment for future editing

Output structure:

Copydocument.md
diagrams/
└── document/
    ├── diagram-1.svg
    ├── network-topology.svg
    └── class-hierarchy.svg

Document transformation:

Copy<!-- Before -->
```dot
digraph { A -> B }

Copy
---

## Layout Engines

Choose the appropriate layout engine for your graph type:

| Engine | Best For | Description |
|--------|----------|-------------|
| `dot` | Hierarchical graphs | Directed graphs, org charts, flowcharts (default) |
| `neato` | Undirected graphs | Network diagrams, social networks |
| `fdp` | Large graphs | Force-directed placement, clusters |
| `circo` | Circular layouts | Ring structures, cyclic dependencies |
| `twopi` | Radial layouts | Tree-like structures radiating from center |
| `osage` | Clustered layouts | Nested clusters, module diagrams |
| `patchwork` | Treemaps | Space-filling rectangular layout |

### Specifying Layout

Three ways to specify layout engine:

**1. In the code fence:**
```markdown
```dot:neato
graph G { A -- B -- C -- A }

Copy
**2. In the DOT code (comment):**
```dot
// layout: fdp
graph G { A -- B -- C }

3. In the DOT code (attribute):

Copydigraph G {
    layout=circo
    A -> B -> C -> A
}

4. CLI override (applies to all diagrams):

Copynode ~/.claude/tools/dot-renderer/process-document.js doc.md --layout=neato

---

Rendering Single Diagrams

To render a single diagram without processing a full document:

Copy# From a .dot file
node ~/.claude/tools/dot-renderer/render-dot.js diagram.dot output.svg

# From stdin
echo "digraph { A -> B }" | node ~/.claude/tools/dot-renderer/render-dot.js --stdin output.svg

# With specific layout
node ~/.claude/tools/dot-renderer/render-dot.js diagram.dot output.svg --layout=neato

# Other output formats
node ~/.claude/tools/dot-renderer/render-dot.js diagram.dot output.json --format=json

---

Supported Document Types

---

Supported Code Fence Syntax

All these are equivalent:

• \``dot` - Standard DOT
• \``graphviz` - Full name alias
• \``gv` - Short alias

With layout hint:

• \``dot:neato`
• \``graphviz:circo`
• \``gv:fdp`

---

Integration with Diagramming Skill

This skill works together with the diagramming skill:

1. Design: Use the diagramming skill with 19-DOT-GRAPHVIZ-GUIDE.md for DOT syntax and semantic coloring
2. Export: Use this skill to render diagrams to SVG for distribution

Recommended workflow:

1. Create document with DOT code blocks (using diagramming skill for styling)
2. Review diagrams in a tool like Graphviz Online or VS Code extension
3. Run export to generate final SVGs
4. Commit both document and generated SVGs

---

Diagram Naming

Diagrams are named based on:

1. Graph name in DOT syntax: digraph MyGraph { → mygraph.svg
2. Label attribute: label="Network Topology" → network-topology.svg
3. Fallback: diagram-1, diagram-2, etc.

To control naming, use a named graph:

Copydigraph NetworkTopology {
    A -> B -> C
}

→ Generates networktopology.svg

---

Editing Rendered Diagrams

To edit a previously rendered diagram:

1. Find the commented original code in the document
2. Uncomment the DOT block
3. Edit the diagram
4. Re-run the export tool
5. The new SVG will replace the old one

---

Output Formats

The renderer supports multiple output formats:

---

Troubleshooting

"Cannot find module 'node-graphviz'"

Install dependencies: cd ~/.claude/tools/dot-renderer && npm install

Diagram doesn't render

• Check DOT syntax at https://dreampuf.github.io/GraphvizOnline/
• Ensure graph type matches layout (use graph for undirected with neato, digraph for directed)

Layout looks wrong

• Try different layout engines
• For undirected graphs, use neato or fdp
• For hierarchical data, use dot
• For circular, use circo or twopi

SVG too large/small

The tool auto-sizes based on diagram content. For custom sizing, edit the generated SVG or use CSS in your document.

---

Example Commands

Copy# Process a markdown file
node ~/.claude/tools/dot-renderer/process-document.js ./docs/README.md --verbose

# Process with specific layout for all diagrams
node ~/.claude/tools/dot-renderer/process-document.js ./docs/network.md --layout=neato

# Dry run to see what would happen
node ~/.claude/tools/dot-renderer/process-document.js ./docs/README.md --dry-run

# Render single diagram with circo layout
node ~/.claude/tools/dot-renderer/render-dot.js ./diagrams/cycle.dot ./output/cycle.svg --layout=circo

---

DOT Quick Reference

Basic Directed Graph

Copydigraph G {
    A -> B -> C
    B -> D
}

Basic Undirected Graph

Copygraph G {
    A -- B -- C
    B -- D
}

With Styling (Cagle Palette)

Copydigraph G {
    node [style=filled]

    // Infrastructure (blue)
    Cloud [fillcolor="#E3F2FD" color="#1565C0" fontcolor="#0D47A1"]

    // Service (green)
    API [fillcolor="#E8F5E9" color="#2E7D32" fontcolor="#1B5E20"]

    // Data (amber)
    DB [fillcolor="#FFF8E1" color="#F57F17" fontcolor="#E65100"]

    Cloud -> API -> DB
}

Subgraphs/Clusters

Copydigraph G {
    subgraph cluster_frontend {
        label="Frontend"
        style=filled
        fillcolor="#E3F2FD"
        UI; Components
    }
    subgraph cluster_backend {
        label="Backend"
        style=filled
        fillcolor="#E8F5E9"
        API; Services
    }
    UI -> API
}