- name
- graphviz
- description
- Generate architecture diagrams, flowcharts, dependency graphs, state machines, and other visualizations from natural language descriptions using Graphviz DOT. Use when: user asks to draw, visualize, or diagram something -- architecture, flow, schema, dependencies, states, ER diagram, block diagram. Returns a clickable GraphvizOnline link with rendered preview.
- metadata
- { "openclaw": { "emoji": "📐" } }
Graphviz Diagram Generator
Generate diagrams from natural language descriptions and return a clickable link to GraphvizOnline with the rendered preview.
When to Use
- "Draw the architecture of ..."
- "Make a diagram showing ..."
- "Visualize the data flow between ..."
- "Create a flowchart for ..."
- "Show dependencies between ..."
- "State machine diagram for ..."
- "ER diagram of ..."
- Any request involving diagrams, graphs, schemas, architecture visualization
Workflow
- If the user's description is vague, ask one clarifying question before generating
- Generate valid DOT code following the conventions below
- Show the DOT code in a fenced ```dot block
- Construct the URL:
https://dreampuf.github.io/GraphvizOnline/#+ URL-encoded DOT code - Output the link on its own line so it's clickable
DOT Code Conventions
Graph type
digraphfor directed graphs (architecture, flows, dependencies, state machines)graphfor undirected graphs (relationships, peer networks)
Layout direction
rankdir=LRfor wide/horizontal layouts (architecture, pipelines)rankdir=TBfor tall/vertical layouts (flowcharts, hierarchies)
Node shapes by component type
boxorcomponent-- services, applications, modulescylinder-- databases, storageellipse-- users, actors, external systemsdiamond-- decision points (flowcharts)folder-- directories, namespaces, packagesnote-- annotations, commentsrecord-- structured data, ER entities (use<field>syntax for fields)doublecircle-- start/end states (state machines)circle-- intermediate states
Grouping
- Use
subgraph cluster_name { label="Group Name"; ... }to group related components - Give clusters a light fill:
style=filled; color=lightgrey;
Styling
- Use
fontname="Helvetica"on the graph for clean rendering - Color-code edges or nodes to distinguish component types when helpful
- Keep labels concise -- full names on nodes, short verbs on edges
- Use
style=dashedfor optional or async connections
Edges
- Label edges with the relationship or protocol:
->with[label="HTTP"],[label="gRPC"],[label="publishes"] - Use
style=dashedfor async/optional connections - Use
dir=bothfor bidirectional relationships
URL Construction
Construct the GraphvizOnline URL by URL-encoding the entire DOT source and appending it as a hash fragment:
https://dreampuf.github.io/GraphvizOnline/#<URL-encoded DOT code>The DOT code must be encoded with standard percent-encoding (spaces -> %20, newlines -> %0A, etc.).
Output Format
Always output in this order:
- Brief description of what the diagram shows (1 sentence)
- The DOT source in a fenced ```dot block
- The clickable GraphvizOnline link on its own line
Example output structure:
Architecture showing the API gateway routing to backend services: ``dot digraph { ... } `` Open in GraphvizOnline