Search code examples
markdownfigure

Render `.excalidraw` file in `README.md`


I have created an Excalidraw figure and saved it as a .excalidraw file. To render the figure in GitLab, it is possible to open the file in an editor and then paste the code into the README.md as

```excalidraw

// excalidraw code

```

However, Excalidraw produces a large amount of code, and the code is pretty unreadable, which makes the README.md messy.

Is there a way to include the render the .excalidraw file directly? More precisely, can I add the .excalidraw file to the project and then render with something like

```excalidraw

myFigure.excalidraw

```


Solution

  • Consider using the Excalidraw Visusal Studio Code extension. It lets you create .excalidraw.svg and .excalidraw.png files.

    When you create the file with the .excalidraw.png extension like below:

    myFigure.excalidraw.png
    

    You get a file that is both editable in the excalidraw editor and it contains the PNG bits to reference it in your markdown.

    Like any other image you can then reference it in your readme.md markdown file as:

    ![My figure](myFigure.excalidraw.png)