How to integrate diagrams.net (draw.io) with your GitHub repo

github-drawio-demo.md

Embedding Diagrams in GitHub Markdown

This explains and demos how to use diagrams.net (draw.io) diagrams in your GitHub repo.

• See repo for more details

Benefits of using diagrams.net in GitHub repositories

1. Diagrams are stored in your repository with your code and docs
2. Diagram access is controlled by GitHub repository access
3. Diagrams are version-controlled using git
4. Create PRs with diagram updates to get approvals and feedback
5. One-click diagram editing from your GitHub repository
6. diagrams.net is open-source: https://github.com/jgraph/drawio

How to integrate diagrams.net (draw.io) with your GitHub repo

Note: Images in markdown are cached and can take five minutes to update

Using VS Code locally, on github.dev or on CodeSpaces (Recommended)

This method does not require any OAuth or GitHub app approvals and defaults to offline mode. 🎉

Using the [Draw.io Visual Studio Code extension], you can do this in github.dev, Codespaces or locally on VS Code.

1. Open the repository you want to create the diagram in
2. Press . to open github.dev (or use Codespaces, or clone and use VS Code locally)
3. Install the [Draw.io Visual Studio Code extension]
4. Open or save a file ending with .drawio.svg or .drawio.png (svg is recommended). This will open the draw.io editor in VS Code.
5. Reference the file using a relative link in markdown like you would reference any file ![Label](relative link)
6. It will now live-update, you can use PRs to review changes, and you didn't need to authorize anything! 🚀

Reference: https://github.com/hediet/vscode-drawio#readme

Thanks

This is awesome! Thanks for the guide!

does this work on azure dev ops in terms of the git repo there and embedding within the ado wiki?

Thanks for the gist, it helped me to explore all options.

As of 2024-11 I found no way to embed into GitHub Wikis any page other than the 1st page of an editable diagram.

If Javascript or iframes are allowed (in GitHub wikis they are not), then in the diagrams.net editor File > Embed > HTML (or iframe) generated markup.