Drawio support | Voters

Drawio support

Ashish Jain

Markdown is great format to create documentation, but is not very good when you want to create and represent technical or functional diagrams.

If we can have .drawio files, which when opened in docusaurus present the diagram created - would be great!

July 27, 2020

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 -