# Your first diagram

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

---

1

Insert

2

Choose

3

Make it

4

Publish

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

---

✓

Insert

2

Choose

3

Make it

4

Publish

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](https://help.gocapable.com/diagrams/overview.html) explains the choice properly.

---

✓

Insert

✓

Choose

3

Make it

4

Publish

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

![Your first diagram](https://help.gocapable.com/images/att1411514410.svg)

---

✓

Insert

✓

Choose

✓

Make it

4

Publish

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

| **If you want**                            | **Go to**                                                                                                                             |
| ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------- |
| To pick the right notation for a real job  | [Diagram types](https://help.gocapable.com/diagrams/diagram-types.html) |
| To learn the editor properly               | [Guides](https://help.gocapable.com/diagrams/guides.html)               |
| To start from something that already works | [Examples](https://help.gocapable.com/diagrams/examples.html)           |
| To put this diagram on a Jira issue        | [Integrations](https://help.gocapable.com/diagrams/integrations.html)   |

---

## 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](https://help.gocapable.com/diagrams/troubleshooting.html).
* Closing the editor saves. There is no separate save button to hunt for.

---

## Related

[Diagram typesPick the right notation.](https://help.gocapable.com/diagrams/diagram-types.html)

[ExamplesMore working source.](https://help.gocapable.com/diagrams/examples.html)

[TroubleshootingWhen it renders blank.](https://help.gocapable.com/diagrams/troubleshooting.html)

---

_That is a real diagram, on a real page, still editable._