Add support for editing diagrams.net diagrams #529
Conversation
|
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 |
|
This is nifty! I'll take a proper look... |
|
fyi i'm going to tweak this a bit further i think when i get a few minutes |
|
Huh, weird, thought I'd added an edit icon there, apparently not. Let me try that again.... |
OK, won't do anything else yet (though will fix that icon) |
d158fa7 to
0150907
Compare
Any SVG or PNG images that contain an editable diagrams.net document will display an "edit" button on hover that opens the image in any embedded editor. Saving the image will cause the file to be downloaded to the user's browser, ready for use back in the docsy site.
0150907 to
87cbf9b
Compare
|
@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). |
|
Oh this is brilliant! Really useful feature. |
https://www.docsy.dev/docs/adding-content/diagrams-and-formulae/#diagrams-with-diagramsnet google/docsy#529 Signed-off-by: Daniel Holbach <daniel@weave.works>
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:
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
svgof 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.