How to Create Custom Diagrams in ToDiagram

Data visualization is powerful—but what if you want to go beyond the basics? ToDiagram isn't just for JSON, YAML, or CSV. You can build your own custom diagrams, tailored to your unique data and workflow. In this post, we'll walk through the process, share tips, and show how ToDiagram's flexible architecture makes it possible.

Why Custom Diagrams?

Every project is different. Sometimes you need to visualize a domain-specific structure, a new API format, or a workflow that doesn't fit standard templates. Custom diagrams let you:

• Map out proprietary data models
• Prototype new data flows
• Visualize relationships unique to your business
• Build tools for your team's exact needs

Getting Started: The Basics

Creating your own custom diagram in ToDiagram is easy and doesn't require any coding. All you need is a JSON file that follows our custom diagram schema.

1. Prepare Your Data

Start by structuring your data in JSON according to the schema. Here's a simple example:

{
  "nodes": [
    { "id": "a", "label": "Start" },
    { "id": "b", "label": "Process" },
    { "id": "c", "label": "End" }
  ],
  "edges": [
    { "from": "a", "to": "b" },
    { "from": "b", "to": "c" }
  ]
}

You can add as many nodes and edges as you like. The only configurable fields are:

• The key used for each node's unique ID
• The keys used for the source and target of each edge
• The key used for the edge label (optional)

You can change these field names to match your data using the configuration panel after selecting Custom format. See the schema reference for details.

2. Set Format to Custom

In the editor, open the format dropdown (bottom left) and select Custom. This tells ToDiagram to use your data as a custom diagram, following the schema above.

Format dropdown showing Custom selected

3. Configure Your Field Mappings

When you select the Custom format, ToDiagram lets you map your data fields to the diagram structure. You'll see a configuration panel where you can:

• Set which property is used as the node ID (e.g., id)
• Set which properties define the source and target of each edge (e.g., from, to)
• Optionally, set the edge label key if your data includes it

This means you aren't locked into a specific property naming—just match your data fields in the configuration and ToDiagram will handle the rest!

Custom Format Configuration panel

4. Import and Visualize

• Paste or upload your JSON data
• Your custom diagram will appear instantly, visualizing your structure

Note: In Custom mode, diagrams are for visualization only. You cannot click, edit, rearrange, add, or remove nodes and edges directly on the diagram. To make changes, edit your JSON and re-import.

Example Use Cases

Example of a custom system design diagram in ToDiagram

• Visualize business processes or workflows
• Map out custom data models
• Create organization charts, mind maps, or flowcharts
• Prototype new ideas visually before implementation

Final Thoughts

Custom diagrams in ToDiagram are all about flexibility and ease of use. If you can describe it in JSON, you can visualize it—no coding required. Try it out and see how much faster you can communicate your ideas!