Add and edit diagrams in the docs

We are using diagrams.net to create and collaborate on diagrams. diagrams.net provides both a web and desktop applications. To download the latest desktop version, go to diagrams.net and click Download. Alternatively, you can work on diagrams in a web app. You can store diagrams in any suitable source.

Add diagrams to the documentation

After creating a diagram, to embed it into a document, do the following:

1. In the diagrams.net editor, to get the embed code, click File > Embed > HTML….
2. In the HTML window, click Create. This generates code for embedding the diagram.
3. To copy the code, click Copy.
4. Open the document you want to add the diagram to in an editor. For instructions about editing the documentation, see Edit documentation via pull requests.
5. Paste the code into the needed place of a document and submit a PR. After the PR is merged, the diagram appears on the page.

Edit diagrams in the documentation

1. On the page of the diagram you want to edit, click on the diagram. This opens the diagram in full screen mode.
2. To open the diagram in the diagrams.net editor, click the pencil icon. This creates a copy of the diagram.
3. In the editor, add the needed changes.
4. To get the embed code, click File > Embed > HTML….
5. In the HTML window, click Create. This generates code for embedding the diagram.
6. To copy the code, click Copy.
7. Open the document containing the original diagram in an editor. For instructions about editing the documentation, see Edit documentation via pull requests.
8. Replace the original code with the one you’ve copied.
9. Submit a PR with the changes. After the PR is merged, the updated diagram appears on the page.