Add support for editing diagrams.net diagrams

[gwatts]

Continuing to look for better ways to work with diagrams and Docsy, I looked more closely at diagrams.net (formerly draw.io and often still referred to by that name).

diagrams.net has a few really great things going for it:

• It's an open source project
• It's a really powerful diagramming tool comparable with commercial alternatives and very feature rich
• The app.diagram.net hosted version is completely free to use and does not require access to your diagram data under most circumstances (ie. it's secure and usable by default in a way that the plantuml server is not
• You can host your own application server easily if you wish
• Diagrams exported from the tool can have the raw diagram data embedded in them, which makes them very easy for anyone to load end edit later

The last point is a key one for me - Often people will create documentation, add a diagram they created in some other tool and neglect to link back to the source file so it can be edited by future contributors (or future contributors don't have a license to the tool, or permission to open the source document!). With editable svg files combined with the service being free, that doesn't happen here.

This PR then allows you to add an exported svg of your diagram to the repo and include it in your markdown as you would any other image. Some javascript then scans the page for any svgs that have been displayed, determines if they're editable and if so displays an "edit" button when hovering over the image. Clicking it loads the diagram up in the online editor - It doesn't need any access to your repo at all as all the data is encoded into the URL.

The tool also offers an embed mode but i found that less appealing as it requires you grant it access to your repo to access the underlying file.

Still something of a WIP at the moment, but thought I'd open the PR early for review/opinions.

[gwatts]

Link to the updated docs with an example you can mouse-over and click "edit" on: https://deploy-preview-529--docsydocs.netlify.app/docs/adding-content/lookandfeel/#diagrams-with-diagramsnet

[LisaFC]

This is nifty! I'll take a proper look...

[gwatts]

fyi i'm going to tweak this a bit further i think when i get a few minutes

[LisaFC]

Huh, weird, thought I'd added an edit icon there, apparently not. Let me try that again....

[LisaFC]

fyi i'm going to tweak this a bit further i think when i get a few minutes

OK, won't do anything else yet (though will fix that icon)

[gwatts]

@LisaFC Finally got around to updating this - See https://deploy-preview-529--docsydocs.netlify.app/docs/adding-content/diagrams-and-formulae/#diagrams-with-diagramsnet

Main difference now is that clicking on the "edit" button after hovering over an image opens the editor embedded within the page you're viewing. Clicking "save" does all the work of making sure the right export options are selected and triggers a download of the modified file using the same filename as was used in the docsy page, so it's easy to update the image for the page author.

Mechnically this doesn't stuff the document into the diagrams.net URL anymore and uses their documented JSON protocol to send the document over to the site instead (works great, as you can still edit diagrams, even if your docsy site is behind a firewall, requires auth to access, etc).

[LisaFC]

Oh this is brilliant! Really useful feature.