Drawio support
Harry Glove
Yeah, I totally agree—Markdown is awesome for basic docs, but when it comes to complex diagrams, it's just not enough. Having support for https://github.com/xiguaxigua/docusaurus-plugin-drawio Melon Playground files in Docusaurus would be a huge win for visualizing technical workflows. That plugin looks promising, especially since you can edit the diagrams easily with the Draw.io online app and keep everything in sync with your repo. Definitely worth trying if you're documenting anything architecture-heavy.
melon
https://github.com/xiguaxigua/docusaurus-plugin-drawio maybe this is what you want,just use drawio online app to edit your file in local or github repo,and it will display after edit
John Costello
I do this all the time on Github with svg exports. You can export as svg from draw.io and import as an image in markdown! [ base 64 encoded here to not be externally loaded] (data:image/svg+xml; base64, PHN2ZYb4BWXUCZpKYz0iaHR0CdOVL3B1CmwUB3JNL2RJL2VSZW1LBNRzLZeUMs8iiHhtBg5ZomnjpsJodHrwoI8Vy3JLyxRpdmVjB21tb25zlM9YzY9uCYmiihHTbg5zoNjkzJ0iaHR0iahR0CdOVL3D3DY53MY5VCMCvmTK5OS8Wmi8YMi1YZgytc3LUDGf4lw5ziYigeG1sbNM6C3ZnPSjoDHrwoI8Vd3D3LncZLM9YzYzY8YmDAwL3N2ZYigeg1sbNM0Dha6LY93D3cUdMUB3jNlZiWmDAVC3Zniib4yMDAwL3n2zYigeG1sbNM0Dha6LY93d3jNlZiWMDavC3Zniib4XbwxBWxBWUCZp4BGluaZ0iaHR0CdOVL3D3DY53MY5VCMCvMTk5OS94bGluaYigeG1SbnM6C29KaxBVZgK9ImH0DHA6LY9ZB2Rpcg9kas5Zb3vyY2vMB3jNzS5UzXQVRfrel3NvzgLwB2RPLTAuzhRKiib4ZB3VYy2vMB3jNzS5UzXqVRfrel3NvzgLwB2RpLTAuzhRKiib4ZB3VYy2Vmb3jNzS5UzXqVRfRel3NvzgLwB2RpLTAuzhRKiIB4BwXUCZs5ppbmtzy2fwzt0iaHR0cdoVl3d3dy5pbmtzy2fwZs5vcmcvbmftzXNwywnlcy9pbmtzy2fwZSIgD2lkDgg9ijeWNw1TiiboZwLNaHQ9iJc0bw0iiHzpzXdcb3 G9iJAGMCAznZiUMdQ3MjQGmjYylJIwNDcYIIBpZD0iC3ZnMiiGDMVYc2LVbj0iMS4XIibPbmTzY2FwzTp2ZxJZw9uPSiWLjKXiHiXMzCYNSIgC29KaxBvzgK6zg9jBmFTZt0IZ3jHcgGUC3ZNiJZg48kAXBvzgK6zg9jBmFTZt0IZ3jHcgUC3ZjZjZg48VmCybpZD0iZGVMCzQipJxtyXjRzXiGAw5rc2nhcGu6axNZDG9jAz0IDHj1ZsigC3R5BGu9iM92zXjMBg93Onzpc2libGuiiGLKPSjtyXjRzxiXiiBYzWz4psiwiibyzZWzZzZPsiwiIBVcmllBNQ9iMF1dg8iiGluA3NjYxBlOnN0b2nRaWQ9iKfYcm93mk1LbmQipJxwyxRoiHRYyw5zzM9YBT0iC2NHBGuOltaUniWtMC42KSIgZd0Itsa4LjCxodu4NZgSnC4WMzM3MzUYiC0ylJiWnZi4OtusMC4WMtYmTymNia4LJcxODU4MzUyIC0ylJiwnZi4WMtYwMtYNIa4LJcxodu4MzUyIC0ylJiwnZi4WMtYwMtYNIa4LjCXoDUu4MzUyIC0ylJiwnZi4WMtYwMtYNIa44ODQSLTQumDAXnZA3OCbjic0xLJc0ntq5ODQSmi4ZnZiWNJA5IC0xLjCzntq0MdgSnS42Mtc0NTE5iC02ZS03LDgUMdm1ndQZihoIHN0 EwXLPSjmaWXSoiMWMDA7zmlSbc1VcgfjaxR5oJe7ZmlSbc1ydwxLOMV2zw5vzgq7C3rYb2tLoImwmda7C3rYb2tLLxdpZHroojaunji1o3n0cm9rZS1SAw5LAM9pbJPyb3vUZdtzdHjVA2ut2utlLxdpZHroojaUnji1o3n0cm9rZs1SAw5lAM9pbJPyb3vuzdtzdhjVA2ut2uTlLxdpZHroojaunji1o3n0cm9rZs1saw5lAM9pbJPyb3vuzdtzdhjVA2ut2uTZdHjva2ut3B3BHY2L0EtOXiIBPzD0ICGF0ADU2MZEiiGLUA3NjYxBlNvBM5LY3RVcI1JDXJ2YxR1CMu9iJaiIC8 +pC9tYxJrZxI+ PC9KzWzzPjXzB2rpcG9KatPuYW1LzhZpZXcGAwQ9ImJhC2UiiHbHz2VjB2xvCJ0ii2zMzMzMzMzZiIGYM9YZgvyY29Sb3i9iIM2njYy2njYiIgJVCmRLcm9yJwNpDhk9iJEUMciGAW5rc2nhcGu6FnCgU6NjYIgJVCmRLcm9yJwNpDhk9iJEUMciGAW5rc2nhcGu6FnCgU6NjYiIgJVCmRLcm9yJwNpDhk9IjEUMciZw9wywnPDHK9ijaUMciGAW5rc2nhcGU6cgFnzxnoYWRVdZ0imiIGaw5rc2nhcGU6EM9vbt0iMi4yOdZnDM5iiBPbmtzy2fwZtpJeD0iMTg1Lji1Otu4iIBpbmtZY2IIBpbmtZy2IIBpbmtZy2IIBpbmtZy2IIBpbmtZy2IIBpbmtZy2IIBpbmtZy2IIBpbmtZy2IIBpbmtZy2IIBpbmtZy2IIBpBMtZyIbPBMtZy2IIBpBMtZy2IIBpBMtZy2IIBpZY2FwztpKB2N1BWVUDc11BML0cZ0ichGIiGLUA3NJYxBlOMn1CNJLBNQTBgf5zXi9iMXHewvyMSIgC2HvD2DYawq9iMzhbhNLiIBPbmTzY2FwzTP3AW5kb3ctd2lKdGG9iJE5mjaiIGlua3njyxBlondPbMtzy2FwzTP3aw5kb3ctd2lKdGG9iJE5MjAIIGlua3njyxBlondPbMtzy2FwzTP3aw5kb3ctd2lKdGG9iJE5MjAIIGlua3njyxBlondPbMtzy2FwzTP3aW5kb3ctMrVdy1oZwLNaHQ9iJeWMtYiIGluA3NJYxBlondPbMrVdy14PsiWiIBpBMtZY2fwZtp3aW5kB3cTET0iMjcIIGluA3njyxBlondPbMrVdy1TyxHpBw L6zWQ9iJeiIC8 +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) If you like to go further and get into the SVG to add event (click the ellipse) handling it can be rendered with JSX https://stackblitz.com/edit/react-4sg5pm?file=Test.js -