This is a Docsify plugin that can embed Draw.io diagrams into your documentation.

• Simplified setup process
• Compatibility with docsify-themeable styles
• Background added to the diagram
• Uses the official Draw.io viewer

To add Drawcsify to your Docsify site, add the following lines to your index.html after Docsify.

<script type="text/javascript" src="https://viewer.diagrams.net/js/viewer-static.min.js"></script>
<script src='//cdn.jsdelivr.net/npm/drawcsify@latest'></script>

Then to embed a diagram, simply add a link to the file with ':include :type=code' added at the end.

[filename](/example.drawio ':include :type=code')

Note: The file needs to end in .drawio or the extension will not recognize it as a Draw.io file.

Note: This example will only work in the Github Pages site. If you are reading the README in the main page, please navigate there.

On the left, you can see a screenshot of the example.drawio file as it appears in the Draw.io desktop app. On the right is the embedded diagram generated by Drawcsify.

Note: There is currently a bug preventing headers in diagram files from displaying correctly. The fullscreen view (accessed by clicking on the diagram) will display the header correctly.

filename

This project is based on KonghaYao/docsify-drawio and carries over the MIT License with it.