Custom Diagrams
Custom diagrams use JSONFiddle Diagram Graph, or JFDG, to describe editable architecture, process, and flow diagrams as structured JSON.
JFDG is useful when you want a diagram that is both visual and machine-readable: nodes, groups, text labels, edge labels, icons, colors, and themes all live in a JSON document.
Start From a Template
Open a JFDG tab and choose Browse templates from the empty canvas. Templates cover common patterns such as:
- Multi-region API failover.
- Enterprise API platforms.
- Event-driven order processing.
- Data pipelines.
- Customer support workflows.
Templates are meant to be edited. Rename nodes, move groups, change icons, and adjust edge paths until the diagram matches your system.
Core Building Blocks
| Element | Purpose |
|---|---|
| Node | A system, service, user, queue, database, file, or process step |
| Group | A boundary such as region, account, team, network, or domain |
| Text | Freeform labels, annotations, and callouts |
| Edge | A connection between nodes, with label, style, direction, animation, and waypoints |
| Theme | Node, edge, and text colors for the current diagram |
Nodes
Nodes can show more than a title. Use fields to create compact architecture cards:
{
"id": "orders-api",
"type": "node",
"title": "Orders API",
"icon": "shopping-cart",
"x": 420,
"y": 220,
"width": 260,
"height": 150,
"fields": [
{ "key": "owner", "value": "Commerce" },
{ "key": "p95", "value": "180ms" },
{ "key": "version", "value": "v1.9" }
]
}
Use larger node sizes when a node needs multiple field rows or a longer service name.
Groups
Groups create visual structure around related nodes. Use them for regions, trust zones, platform domains, or lifecycle stages.
{
"id": "edge-security",
"type": "group",
"title": "Edge Security",
"x": 240,
"y": 120,
"width": 620,
"height": 360
}
Keep groups generous enough that auto-arrange has room to preserve relationships.
Edges and Waypoints
Edges support solid, dashed, and dotted styles; one-way, reverse, bidirectional, and no-arrow directions; labels; animation; and bidirectional effects.
For manual diagrams, JSONFiddle adds two uniform waypoints to selected edges. Drag the waypoints to bend the edge, similar to drawing tools. This gives precise routing without requiring a long list of bend points in the properties panel.
{
"id": "orders-to-ledger",
"type": "edge",
"from": "orders-api",
"to": "ledger-db",
"label": "write",
"style": "dashed",
"direction": "forward",
"animated": true,
"waypoints": [
{ "x": 620, "y": 260 },
{ "x": 720, "y": 360 }
]
}
Theme Customization
Use the canvas theme control to customize the current diagram. Diagram themes are separate from app light/dark mode so exported diagrams can match a document, deck, or brand.
The theme modal includes:
- Light and dark presets.
- Live preview.
- Node, edge, and text color controls.
- Download and upload for reusable themes.
Auto-Arrange Safely
Auto-arrange is best for rough cleanup, not final presentation layout. Before using it:
- Save or export a workspace package.
- Use groups with enough padding.
- Keep manual waypoints for important cross-region or failover edges.
- Review disconnected labels after arrangement.
If a highly designed architecture diagram depends on exact placement, use auto-arrange early and manual positioning afterward.