editable project in URL link

[bernd-schotanus]

Currently the URL link leads to a rendered version of the sequence diagram.

If the shareable URL would generate an editable project this would enable easy collaboration.

[davidje13]

Interesting idea. Note that the use-case for the existing URL is more aimed at embedding into documentation (e.g. readmes) where it makes sense to store a sort-of-code representation rather than an exported SVG or PNG.

There are 3 possibilities I can think of:

1. Have another button which generates this "shareable" / bookmarkable URL for the editor; or
2. Have the page URL change on-the-fly as you type, allowing you to copy the URL from the browser to share it or bookmark the page directly; or
3. Include a link in the generated SVG which navigates to the full editor when clicked

I'm leaning towards the second option, though it could look a bit messy for users. The third is tempting but could be clutter / an annoying "advert" for some users.

Another option is to use short identifiers like (e.g.) jsfiddle does and store the code server-side, but I'm against that because I don't want the (potentially sensitive) sequence diagrams stored on the server (right now they never leave the client side except for the server-side-rendering URL you mentioned, and even then it only uses it for that request and does not store it)

What are your thoughts? It would be good to get more context on your use-case.

---

As a not-great temporary solution: note that you can download the SVG and drag it into the editor. This is true of all SVGs generated by this tool; it includes the source code and will load it when dragged in.

[davidje13]

Actually another possibility occurs to me; it might be possible to check the Accept header when serving the /render request to detect whether it is being used in the context of an image or a browser navigation. That way it could return an image most of the time, or a redirect-to-editor if in a browser.

Might be risky and I'd have to do some research / experimentation into how various things set the Accept header to get anything reliable from this.

As a safer alternative I guess it could render the "edit this in the editor" advert idea only if it believes it is in a browser; then at least it wouldn't break if it thinks it's in a browser when it's not.

Even simpler: maybe the URL export pane could include a checkbox for "include link to editor".

[bernd-schotanus]

Wow you really jumped on this.

Well my use case would be to be to include both the diagram itself and the source as a caption url in documentation for projects, that way, when a diagram in the document needs to be changed, it's just one click away to start editing (the actual code being present inside the document is a bonus). Also to be able to share a work-in-progress with colleagues easily and ask for input.

I did not know you could drag SVGs into the editor, that's handy!

I've tried fiddling with the repo myself, but I had some issues with the suggested npm commands on my windows machine but that's off-topic for this issue.

[davidje13]

If you're having problems on Windows then please do open another issue with details; this has only been used on unix systems, but there's really not much compilation or server-side stuff so it should be solvable quite quickly (the ability to export PNGs from the commandline is likely to be harder but the rest should be fine).

I see the value of that use case; only concern is that it would mean having the code twice in the markdown file (once for the image and once for the link), but I can't think of a cleaner way to handle it just now. In any case if the URL is available you can choose how to use it (I'm considering whether it's worth having a dedicated export-as-markdown but I'm leaning against that for now).

For the core feature, I thought of some possible bad interactions with the existing local-storage-save feature (where the old code is restored when you return to the editor). Specifically if somebody visits a code-containing link, they could lose their locally-stored code accidentally. But then the local-save was always a bit screwy (e.g. having multiple tabs open would only save the most recently edited). I'll have a bit more of a think about how that could be handled better. Should be able to get something added soon-ish, but usual caveats about this being a hobby project, etc.

[davidje13]

Just delivered #60 which should make this relatively straightforward without risking data loss. Might be able to get it done this week. Same caveats again yadda yadda.

[davidje13]

I just shipped an implementation of this (live on the github-hosted site, will be picked up by the davidje13.com site at some point in the next 24 hours).

In the URL export there is now an option to get the view URL, edit URL, or a pre-formed markdown image which links to the editor. Have a play and let me know if it meets your needs.

[bernd-schotanus]

Thank you David!

I really like this tool, I'll definitely be using it in the future.

Op ma 20 jan. 2020 om 20:26 schreef David Evans notifications@github.com:

I just shipped an implementation of this (live on the github-hosted site, will be picked up by the davidje13.com site at some point in the next 24 hours).

In the URL export there is now an option to get the view URL, edit URL, or a pre-formed markdown image which links to the editor. Have a play and let me know if it meets your needs.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/davidje13/SequenceDiagram/issues/59?email_source=notifications&email_token=AEX6VGMQ7TUMKRCJGJXZHNLQ6X3GZA5CNFSM4KFXMQS2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEJNTOFY#issuecomment-576403223, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEX6VGJDM4JWFU3HBRX6R6DQ6X3GZANCNFSM4KFXMQSQ .

[davidje13]

No worries; glad to help.

I'll close this issue now but feel free to re-open if you find the new options don't solve your use-case.