Skip to main content

Create a diagram

Start with a diagram type. Each type page shows the source format, a small example, and the syntax that you need first.

A simple workflow​

  1. Choose a type from the diagram type list.
  2. Open its Syntax page.
  3. Copy the example into diagram.zip.
  4. Replace the example labels and connections.
  5. Check the preview.
  6. Save the diagram when you want a stable link.

Choose a type​

Use the filter on the diagram type list to search by name, format, or purpose. The list has one syntax page and one style page for every supported type.

When you choose a type in the editor, diagram.zip records it in the page URL as ?type={type}. Reloading or copying that working URL keeps the same active type. Saved read and edit links remain alias-based and do not depend on this query.

Source and preview​

The source editor is the working state. The preview updates as you edit. A syntax error can stop the preview from rendering. Read the type page when the error points to a language rule.

Structured types, such as BPMN, Diagrams.net, Excalidraw, UMLet, Vega, and WaveDrom, use XML or JSON. Keep valid document structure when you edit these types.

Save or share​

Use Save to create a saved revision. Use a read link when people only need to view the diagram.

Use an edit link when people must save changes. Read Share a diagram before you send an edit link.