graphviz

SKILL.md

Important: Use `dot as the code fence identifier, NOT `graphviz .

Quick Start: Choose digraph (directed) or graph (undirected) → Define nodes with attributes (shape, color, label) → Connect with -> or -- → Set layout (rankdir, spacing) → Wrap in `dot fence. Default: top-to-bottom (rankdir=TB), cluster names must start with cluster, use semicolons.

| Nodes overlapping | Increase nodesep and ranksep | | Poor layout | Change rankdir or add {rank=same} | | Edges crossing | Use splines=ortho or adjust node order | | Cluster not showing | Name must start with cluster | | Label not displaying | Check quote escaping |

Create complex directed/undirected graphs with precise layout control. Best for dependency trees, org charts, network topologies, and module relationships. Use when you need fine-grained edge routing or hierarchical layouts with many levels. NOT for simple flowcharts (use mermaid) or data charts (use vega). Source: xicilion/markdown-viewer-extension.

View raw