search

yuzutech / kroki

Creates diagrams from textual descriptions!
https://kroki.io
MIT License
2.78k stars 206 forks source link

Having "autofill" links, and being able to easily generate those links from the image link #706

Open gissehel opened 3 years ago

gissehel commented 3 years ago

I've searched the issues for a similar request and didn't find it.

Would it be possible to create a link from a kroki image to generate a new link to edit the diagram ?

Example:

Let's suppose I've a diagram on a wiki site which is a svg with the kroki.io url https://kroki.io/seqdiag/svg/eNrVkUtOAzEQRPc5RSn75AJ8LhKhqGM3Q8uebrB7BBLi7tgin4mEwmxZeGOVX5WrKr9FoQGfK2CqXLB5RCqWZCuGXaYDZzxgHUyVg8Nt_XR3W0oxwvnDYQp_YbzSwO0dBlYu5AxCdyw04rnY-IOwxpiR7zdn8tyt2sj7d0myr9JAF8_qVhgydis7OIlyvGQjje2Ao7jogCyarr2uub-lmHlFqcc2OmRJupAlpF7H8gRL12iqDmy_m0qGaMhT7BenhpvSWf3P0bpOdOJzxCPgX27ytfoGoijygg==

I would like to be able to quickly edit the url to generate an "update url". Something like:

And then, it would load the kroki.io home page with the diagram combo already selected and the editor field with the text from the url.

It would allow use cases such as (which by the way is the diagram used in the example):

I suppose a simple javascript in the kroki.io main page would be enough to implement the first type of links ( https://kroki.io/#seqdiag/svg/... )

ggrossetie commented 3 years ago

Hello @gissehel

That's an excellent idea and something I envisioned. However, Kroki is all about providing an unified API on top of diagram libraries. I don't want to set false expectations by providing a very limited diagram editor.

In my mind a good diagram editor should provide auto-completion, syntax highlighting, error/warning notifications, suggestions, inline documentation... As you might have guessed, it would take considerable time and effort (which require funding). A solution based on Language Server Protocol would be really neat! Even though, we would need to implement (and maintain) more than a dozen diagram languages.

Having said that, your first proposal seems very reasonable. What about a query parameter: https://kroki.io?edit=seqdiag/svg/<diagram-encoded>. If there is an opportunity (in the future) to create a fully featured diagrams editor then we could redirect to editor.kroki.io (or whatever). I still need to give it more thought before committing to this solution.

For reference, there are already a few online editors:

It's also possible to edit diagrams (with live preview) in IntelliJ IDEA and VS Code (through the Asciidoctor Kroki extension). A community member is also working on a text editor and has recently integrated Kroki: https://github.com/DaveJarvis/keenwrite

gissehel commented 3 years ago

Ok, so if the solution is to have a separate site to do it, I've wrote (quickly) something on my side.

For any kroki diagram url, just prefix it with https://webgiss.github.io/niolesk/# and you've got an url to an editor for kroki diagrams. It works by default with official kroki.io web site, but I've also tested it again self hosted kroki instances and it works.

No server magic here, just static hosting is enough.

Example

Using the kroki url in the original issue:

gissehel commented 3 years ago

I've now added a docker image ghcr.io/webgiss/niolesk that you can start along side the official kroki docker image. You can link both by specifying the kroki engine url as a docker env variable.

gissehel commented 3 years ago

I've now added a simple domain for the site : https://niolesk.top/. So the original link become:

And prefixing any kroki link with https://niolesk.top/# (whether it's kroki.io or any other instance) will allow editing the link.

ggrossetie commented 3 years ago

That's nice! 👌🏻 I will probably open a pull request to polish the UI a bit but apart from that that's really cool, well done!