Support for displaying Excalidraw files in GitHub Markdown

[matsest]

Similar to support for mermaid, it would be very nice to have support for rendering Excalidraw (@excalidraw) files in READMEs, wikis, etc.

Diagrams are implemented in a way that they are easily stored in json format, which makes them viable for usage in git repos. See also the link below for a usage where Excalidraw have been integrated into a VS Code to render (and edit) .excalidraw files.

Example of usage: ![](./my-diagram.excalidraw)

More information:

• Excalidraw source repo
• Excalidraw VS Code extension source (unofficial)

[leighmcculloch]

@matsest One thing you can do in the interim to get essentially the same affect is to export the Excalidraw drawing as a PNG and select the Embed Scene option. Excalidraw will embed the JSON inside the PNG file and the PNG file can be edited by simply dragging it onto the Excalidraw website. The PNG is completely compatible with browsers and other applications though.

You can see an example of this here: https://github.com/stellar/starbridge/blob/effd63d/docs/design.md

[Neykah]

That's amazing, thanks so much for this advice !!!

[SoumayaMauthoorMOJ]

@matsest's solution is a good work-around, but I still think providing support for the native excalidraw JSON format would be a good idea since it would make the diagram searchable (see this example) and more diffable than SVG

[stopsopa]

+1 for native support of excalidraw

[RafalSkolasinski]

Awesome thing about it is that if you name file .excalidraw.png you can at the same time edit it in VS Code!!!!

[gbraad]

I would suggest using the .excalidraw.svg option; this allows you to edit the file easily with tools like Inkscape, but also good on source control as this is not a binary format.

Used here: https://github.com/crc-org/engineering-docs/blob/main/content/Usermode-networking-stack.md#technical-details

![](./assets/gvproxy.excalidraw.svg)

which also outputs correctly with mdbook, etc. The only issue is the font does not look right (does not use the handwritten look).

Note: I prefer to see native support, as using .excalidraw would also integrate nicely with Obsidian and the Excalidraw plugin in 'legacy mode'.

[alex-titarenko]

Another workaround is to use NotesHub app (see a recent announcement: https://about.noteshub.app/blog/archive/2024/4/noteshub-33). It has a nice GitHub integration and now the ability to create Excalidraw SVG files. In this way, all whiteboards created in the app will be perfectly displayed in GitHub.

The advantage of this workaround is that Excalidraw SVG could be saved directly to a GitHub repo.

[gbraad]

This is not the same as the OP asked for.

He is looking for a way to 'render' the Excalidraw diagrams on GitHub, like the README.md files. Such as: https://github.com/crc-org/engineering-docs/blob/main/content/Usermode-networking-stack.md#technical-details I was looking for the same approach to use GitHub directly as a means to read (and edit) our engineering documentation.

You're suggesting an alternative editor. Which the GitHub Web Editor . already can be.