Diagrams

The diagram designer draws flowcharts, processes in swimlanes and network diagrams from a palette of over forty shapes — flowchart symbols, BPMN events, tasks and gateways, and network devices. Drag from the dot on a shape's side to connect it; drop on empty space and a new step appears, already joined. Connectors find their own way around everything in between, as elbows, straight lines or curves, with labels and arrowheads.

Arrange lays the whole diagram out in layers, keeping each shape in its lane. A Mermaid flowchart pasted in becomes an editable diagram, and any diagram goes out as Mermaid, SVG, PNG or JSON. Every change comes out as a short list of operations that another copy applies, so several people can work on one diagram over your own connection.

An order process in swimlanes

The customer, the shop and the courier, each in a lane. Move a step and its connectors re-route; drag from a dot to add the next step; double-click a shape to type in it. Arrange tidies the whole process, and every change is reported with the operations it made.

Keyboard: Tab moves between shapes in reading order, the arrow keys move the selected ones, Enter edits the text and Delete removes them; Ctrl+C, V, D and Z as usual. The panel's Connect to joins two shapes without a pointer, and the Outline reads the whole diagram as a list.

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-diagram id="dg-process" lang="en-GB" label="Order process" style="inline-size: 100%; --bmx-diagram-height: 44rem"></bmx-diagram>

From Mermaid

Edit the Mermaid on the left and the diagram follows, laid out as you type. Shapes, labels on links, dotted links and subgraphs (which become lanes) are all read; what cannot be read is said, line by line.

Mermaid

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-diagram id="dg-mermaid" lang="en-GB" label="Diagram from Mermaid" toolbar="false" style="--bmx-diagram-height: 26rem"></bmx-diagram>

A network, to read

Read-only: pan, zoom and open a device to see its details. The same element with readonly, for showing a diagram rather than drawing one.

Device: Open one.

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-diagram id="dg-network" readonly lang="en-GB" label="Office network" style="--bmx-diagram-height: 22rem"></bmx-diagram>

Two people, one diagram

Two copies, each sending its changes to the other as operations, with a quarter of a second's delay as a network would add. Move, add, connect or delete on either side and watch the other catch up. Undo on one side undoes only that side's own change.

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-diagram id="dg-left" lang="en-GB" label="First person" shapes="flowchart" style="--bmx-diagram-height: 24rem"></bmx-diagram>
<bmx-diagram id="dg-right" lang="en-GB" label="Second person" shapes="flowchart" style="--bmx-diagram-height: 24rem"></bmx-diagram>

Two hundred steps

Ten teams running twenty steps each, with checks that send work back: two hundred and one shapes arranged in layers with as few crossings as the layout can find, every connector routed around the shapes.

Arrange two hundred steps

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-diagram id="dg-large" lang="en-GB" label="A large process" shapes="flowchart" style="inline-size: 100%; --bmx-diagram-height: 30rem"></bmx-diagram>