How to embed Excalidraw diagrams
Start off by creating your diagram in https://excalidraw.com
eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO1aXXObOFx1MDAxNH3Pr8i4r3WKvqW+pU13J1snTep02mans0OA2DRcdTAwMThcXMD56vS/r8AxQmBcdTAwMDduN9ntdOuHTJDOQVfiXHUwMDFl6d5cdTAwMGJft7a3XHUwMDA3+c08XHUwMDE4PN9cdTAwMWVcdTAwMDTXnlx1MDAxYoV+6l5ccp5cdTAwMTbtl0GahUmsu3B5nSWL1CuR0zyfZ8+fPTOMXHUwMDFkL5ktWUFcdTAwMTTMgjjPNO5Pfb29/bX8q3tCv+BcdTAwMGX5x1x1MDAwZvH49q+Tj1x1MDAxZc3PxrtMJKODklqCVsb4oTtLYt90XFzrVqZkdX1T2CVZdX1cdTAwMTX6+VS3oVrbNFxiJ9O80ejGk6hcdTAwMTjCqVqyPE0ugpdJlKTF0E9cXI5cdTAwMDJaXHUwMDFi+sz1LiZpsoj9XG6Tp26czd1Uz9TgzsMoXHUwMDFh5zfRco1cXG+6SINBY5T3d2bSRnvFy1x1MDAxMr2ihqWHnUzjICvWXHUwMDEzVa3J3PXCvFhcdTAwMDLkmHlcdTAwMTQ2zvf9cuk/Ne8/ddP53X1cdTAwMDZZcVGzLFxiikeDXHUwMDExxYJcdTAwMTOH46rHuFx1MDAwMKKi2XqYxKU7KFx1MDAwN1x0hVx1MDAxODW0MNvTbpCXdz13oywwS1ms4qumi9TdpOYqt55/hN5cdTAwMWSeXHUwMDFlvp1E4Zfsy3BcdTAwMTJkf1RmW+7ipmlyNah6vj1df99cdTAwMTU8XHUwMDBmrnP7RstcdTAwMTE/777YRePI3TuavkHZdLR7dlx1MDAxNo5qt737zyzuYu67y3lcIk6VZFx1MDAwMisplHm4UVx1MDAxOF/oznhcdTAwMTFFpi3xLszSbNXsbUjl/vk35m5cdEVIWyhEiLZQhNNcdTAwMTZcblx1MDAwNsgk4EI4zk8sk3IuLZkoppR299pDNipRfJNIXHUwMDE4xophQfl3iMTynpbHXHUwMDExzjnBXHUwMDAwj6ua50nYVKH5b9s8+fKi+v/T07XomjtcdTAwMTU/bPAt0URulr9MZrMw11x1MDAxMzkqjGhcdTAwMWGc5W6av1xiYz+MJ7rPaHh1vOz3OEtcbldLvEUxwaGzozcp6XCHXCJCXHUwMDE4ZVx1MDAwNNVQXHUwMDEzd15oZEdK5UitYM4wv+utNpJBXHUwMDEw+8agtrG7hVxip4HrN3s1r95X36nWq/70lry/TEen/sn48PgwOj99M75cdTAwMTm3VX+eandcXJ3VZU8hfCWNg5XCp6QtfLXuhDS4buVcdTAwMTNOzz3x/1M+J4pyKtYpXHUwMDFmUdRsXUlcdTAwMWZhobh2KkN7KOnr+EdcIvWfS5+A0FxmhEZAUzjMXHUwMDE2y3TUXHUwMDA1N5FR8cOdcFWHky648aviRzvhXHUwMDAyXHUwMDA2VyC4tNaddcJcdTAwMTFcZo5hcFx1MDAwMoMzXHUwMDE4XFzA4FxuXHUwMDA0V7CpKthTRVx1MDAwZVx1MDAwNvlcdTAwMThyXHUwMDE0yONcdTAwMTG2/GDY6fO1PKEk8E5cdTAwMDKz3H4oulx0XHUwMDFjSpBcdTAwMTZBdlx1MDAxMrhcdTAwMDMlIChcdTAwMDFDXHRcdTAwMDRKoFCCXHUwMDAwLqu9vfUg2Fx1MDAxMWJcdTAwMGbXXHUwMDEwXGJKsJe1U23I3nOH3XpcdTAwMTPW3jLsXHUwMDE2nLC9tVtAQlx1MDAwMlx09lY97Na0vVn3IVAogUNcdFx1MDAxMkhQ0Enb+3CPZVVcdTAwMDRKoFBcdTAwMDL7Z4Ru59tM2GpcdTAwMTBcdTAwMDfzVMe+Olx1MDAxZW9cdTAwMDbH4WxcdTAwMTHpqPPorlv35unCXHUwMDA0kmtzOWODZUE1/nL09enPwWR0ffx6fFx1MDAxMtxeXHUwMDA3Izo9il4t3FH/9MekMcu6h0mHVulcdTAwMGZ2TFuV/pimX9nPhuxHn4pcdTAwMThcdTAwMTNH4laNo1x1MDAxY2dj5UN3OUinP/LhS1x1MDAxZj9I/oNB6MfMllx1MDAwNFxijVx1MDAxMFxmXHUwMDBl3KMxcMfFXG6GJ8CDklx1MDAwMe/fOMR6xOJcdTAwMTJIQNBcdTAwMTGQgFx1MDAxMqAmNeL9XHUwMDFlXHUwMDA0XHUwMDA2JFx1MDAxMOghRlx1MDAxMey5IVxuPVcp0DNcdTAwMTDDMCkgxqBcdTAwMDRcdTAwMDUkNFx1MDAxMoRcdTAwMWVcdTAwMDSoSVx1MDAxY1x1MDAxYZhcbmjuKKAxmoCGXFxcdTAwMDJcdTAwMWGYXG5gvixhJaJGaN1cdTAwMDMvYHi1qSrfK4jtgZcgPHZg64NcdTAwMWRcdTAwMDbE81x1MDAwN8JvNXiPXHUwMDE0IFtcdTAwMDashr8vPo7Op3uvboLLsz3+ct+7unWPs7dO3/hYh4P2+1x1MDAwMWrOrNqLQfM2qVxukFxy7FeAvCFAJpRiSSVd+/pcdTAwMWPLZusqPuY6NFx1MDAxNsRcdTAwMWPUP1t0XGZcdTAwMGIyoadcdTAwMTi49lx1MDAwMYwxgaFcdTAwMDRcdTAwMDPWkzhcdTAwMTRv299Z4GpcdTAwMWOQnVx1MDAxNTT7+Oqu6TXKMN14XHUwMDA2w9fk2ZdcdTAwMDBcdTAwMWVcdTAwMDFaxrTTpj5cdTAwMDRohVx1MDAxYkFr6JjA3KK2XHUwMDFk9SRcdTAwMTBcZnNURKCVVWI/h1x1MDAxZXlcdTAwMDG0QNd4NdEjXGJcdTAwMDcmyLb6e+Ct4KOHPVx1MDAxMoa332P0wGMgXHUwMDFl9vq0kXL0wFx1MDAwM9eHXHUwMDAz10dcdTAwMDDXx35cdTAwMWbRXHUwMDAzXHUwMDBmq1xmbcZvNXiPVa2tXHUwMDFisFx1MDAxYf6+YHT993KtYNT63K5cZkS50yjUMrqz5ltOseZLXHUwMDE1XG6p1TpSnLOzx1xyRVGj/Vx1MDAwN/iUXHUwMDEzXHUwMDExrVx1MDAwNeJI0oo6y1XdXHUwMDE0imJGueSYXHUwMDE5O1x1MDAxZewjNcLrj1x1MDAxY1x1MDAxMIuWvqMnejJccrPa80nifFx1MDAxY95cdTAwMTZGm08+ytbf3FlcdTAwMTjdWEtcXNxiN1xuJ8XkXHUwMDA3nrY3SFx1MDAwN/UlyEPPjSrALPT9KKi7TFx1MDAxNmh7y6FMaO/poVxc3Zr2+Vx1MDAxMm2QpOEkjN3opD6Ze3SVvEv916NcdTAwMDN68Plm/Lsz+bB/SI8u+uhcbjnmXHUwMDE4XSZ4mLZkpdbkd79U1a0qKZlcdTAwMTJS4XVcdJ6p17Xef1BBXHUwMDE4XHUwMDE2Qj18hkcocWpq/i5Vufm/oqo8mcMkZc2irVx1MDAxZm32Uj9bd8fiwJ3Px7len8Hqe9HBZVx1MDAxOFxcvWi75lx1MDAxM8dxXG5yKb3CJ8tT9Ou3rW9/XHUwMDAzNtdm0SJ9
This That
Click ‘Save as image’ and make sure the ‘Embed scene’ checkbox is enabled. This is required for loading your image back into Excalidraw should you wish to make changes later on. Name your file and export to SVG, saving it inside docs/images
.
Add the following to embed it inside your documentation:
.. raw :: html
: file : ../../ images / my - diagram . excalidraw . svg
It is preferred to use the above convention over .. image::
in order to retain the font used by Excalidraw.
Rebuild the docs and open the resulting html inside a browser.