Your first diagram

Do this on a page you actually want a diagram on. There is nothing here you will need to undo.

Edit any page, type /diagram and pick Diagram (Capable).

Choose how you want to make it. If you are not sure, pick Mermaid: it is the quickest way to get something real on the page, and you can convert later. Text or visual diagrams explains the choice properly.

Draw, or paste some source. The editor previews as you go.

#Something to paste

This is the flow you are following right now. Paste it into a Mermaid diagram and you will see it render.

flowchart TD
    Start(["Page open in the editor"]) --> Slash["Type /diagram"]
    Slash --> Pick{"Draw it or write it?"}
    Pick -->|"Draw"| Draw["draw.io or Excalidraw"]
    Pick -->|"Write"| Write["Mermaid, PlantUML, ..."]
    Draw --> Save["Close the editor"]
    Write --> Save
    Save --> Done(["Diagram is on the page,<br/>and still editable"])

#Which produces

Close the editor and publish the page. The diagram is stored with the page and anyone who can edit the page can edit the diagram.

#What to try next

#A few things that catch people out

• The diagram is saved with the page, so it is only visible to people who can see that page.

• A syntax error shows as a blank diagram rather than a message. See Troubleshooting.

• Closing the editor saves. There is no separate save button to hunt for.

#Related

That is a real diagram, on a real page, still editable.