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.
This project is based on KonghaYao/docsify-drawio and carries over the MIT License with it.