ToolRobinNo account needed

Engineering Diagram Editor

Build a directed flow or architecture diagram from named boxes and connections.

Load the example or add boxes. Give each a meaningful name; use Find to locate a name or stable ID in a larger diagram.

Runs in your browser. No diagram is uploaded. No account, Python or GPU required.

The layout worker is downloaded from this site when you generate. Your diagram stays on this device.

1. Describe your diagram

Rename the boxes, choose their connections, then generate. Labels and title accept up to 200 UTF-16 units.

Go to preview

Boxes

Connections

Edit connections
Back to boxes
Use JSON from an AI assistant

Paste diagram schema version 1. Applying invalid JSON keeps your form unchanged. This does not call an AI model.

Deleting a box keeps its connections for correction. Edits invalidate exports until you generate again. Input stays in memory and disappears when you leave or reload.

2. Check and export

SVG · editable text

Verify original labels and connections

The JSON retains original IDs, exact labels and directed connections. Check them before sharing.

Back to editing

Check the meaning before sharing. Fonts can differ in other SVG viewers; crowded arrows can overlap. This is graph layout, not a sequence-diagram or circuit simulator.

A modern browser with Canvas, Web Workers and Intl.Segmenter is required.

Layout engine and source licenses
How to use

What is an engineering diagram editor?

Build a directed flow or architecture diagram from named boxes and connections. Edit the structure, check the generated layout, and save SVG plus versioned JSON. This is a layout tool: it does not infer missing steps or certify an engineering design.

Step by step

  1. Load the example or add boxes. Give each a meaningful name; use Find to locate a name or stable ID in a larger diagram.
  2. Add connections and choose their source and target. Choose top-to-bottom or left-to-right layout. Removing a box keeps its connections so you can repair them or restore the box.
  3. Generate, then inspect names and arrow directions. Fit gives an overview; actual size allows scrolling. A successful structural check does not guarantee crowded arrows are easy to read.
  4. Download SVG and JSON. Reapply the JSON to restore the editable structure; changing an SVG in another editor does not update the JSON. Keep your saved copies before leaving.

Choosing the settings

OptionWhat changes
Flow / architectureBoth use named boxes and directed connections. The selection does not add sequence, circuit or other domain-specific rules.
TB / LRTop-to-bottom / left-to-right. Interface language does not reverse the graph direction.
Find and paginationTen items per editing page. Filtering changes the controls you see, not the complete generated/exported diagram.
SVG / JSONSVG contains vector shapes and text. JSON preserves version 1 IDs, labels and endpoints, but not the generated coordinates.

Example and expected result

A review flow with 3 boxes and 2 directed connections exports all 3 boxes and both connections. Find one box and rename it, regenerate, then check the new label and unchanged connection endpoints in the JSON. These counts illustrate the workflow; they do not predict layout dimensions or processing time.

If it is not working

  • If JSON has pending edits, apply it or discard those edits before generating. An error identifies the source path; correct it and retry.
  • For a missing endpoint, restore the removed box or choose an existing endpoint. Connections are not silently deleted.
  • If layout times out or exceeds an output bound, cancel and simplify a saved copy before retrying. Input changes invalidate the old result; download buttons become available only for the current successful result.
  • Clear offers one in-page restore. Leaving or reloading releases the task; it is not autosaved. If clipboard access is unavailable, select JSON and use the browser's copy shortcut or download it.
  • Save input JSON keeps a valid editable diagram without layout coordinates. If the engine cannot load, save it before reloading, then use Open JSON file. Apply or discard a pending pasted JSON draft before saving. File import accepts UTF-8 JSON up to 1,000,000 bytes; invalid files keep your form unchanged. Reading can be cancelled or superseded by an edit. Input is not uploaded or autosaved.

Formats and limits

Input is the form or schema version 1 JSON, up to 1,000,000 UTF-8 bytes. Use 1–100 boxes and 0–200 connections. Titles and labels allow up to 200 UTF-16 units; nonempty titles and box labels are required. Connection labels may be empty. IDs use 1–40 ASCII letters, digits, _ or -, starting with a letter.

Layout stops after 15 seconds. Output is bounded to 16,384 pixels per side, 64,000,000 pixels total and 5,000,000 SVG bytes. Unknown fields/versions, duplicate IDs and missing endpoints are refused. This is not a Mermaid, CAD or circuit-file importer.

No GPU or Python is required. Layout runs in a browser Worker using fixed same-origin resources. SVG uses text, not text converted to paths; another viewer's fonts can change appearance. Check the SVG in its destination application.

FAQ

Does it create an engineering design for me?

No. You supply the boxes, labels and connections. Checks cover source structure and bounded output, not whether the design is correct.

Which direction should I choose?

Use TB for a vertical flow and LR for a horizontal dependency chain. Regenerate and inspect whether the result fits its destination.

Why can a correct diagram still look crowded?

Complete connections can still overlap visually. Shorten labels, simplify a copy, and check actual size before sharing.

Why is Generate unavailable or my JSON refused?

Apply or discard pending JSON. Check the indicated path, version, limits, unique IDs and existing connection endpoints.

Is my diagram uploaded or sent to AI?

No. Source and results stay in page memory. Fixed layout resources are loaded from this site; no model is called. An assistant can prepare the same schema for you, but this page does not connect to your AI account.

You might also need