PB-2066 Replace SVG diagram with mermaid diagram #patch - #71
Conversation
55d5e47 to
bf6a2a0
Compare
asteiner-swisstopo
changed the title
boecklic
left a comment
boecklic
left a comment
There was a problem hiding this comment.
Very nice!
Github adds some handy controls (see https://github.com/geoadmin/doc-tech/blob/feat-PB-2066-add-mermaid-diagram/download-data/stac-api/asset-upload.md) to these graphics (e.g. the 'zoom modal' is very useful specially for larger diagrams). I guess it's not that easy to get these kind of controls as well, right?
bf6a2a0 to
87902b8
Compare
I failed to make the vitepress-mermaid-renderer plugin work but I managed to use a Vue component from this GitHub gist to make it at least zoomable. @pedroslvieira, can you have a look at the commit and comment on whether that makes sense or not? Also: Is the additional depency less only used for building or is that now part of the payload? Or maybe you get the vitepress-mermaid-renderer working which would even provide buttons... |
|
@asteiner-swisstopo the vue component made sense and was working well. But I managed to make the plugin work. Let me know what you think |
The two should represent the same workflow. I would argue that the handcrafted version looks better but it is surely an advantage to have it editable as code. There is a glitch with boxes that have three lines: The bottom half of the last line is cut off.
This has the following effects: - The mouse changes to a magnify glass when you hover over the diagram. - Clicking resizes the diagram to cover the whole window. - In full-window mode, you can pan vertically and there is a "Close" button at the top right to close the view again. The vue component "Zoomable" is copy-pasted from [this GitHub gist](https://gist.github.com/evsar3/e91b435ede762e4ad6de204f22863965) I found through a web search. It makes use of the dynamic stylesheet language "[less](https://github.com/less/less.js)", so I added this to the dependencies. I cannot judge whether that dependency is really justified or if it could be done easily in some other way. Maybe our JS/CSS experts could work around that. I tried to use a plugin called [vitepress-mermaid-renderer](https://vitepress-mermaid-renderer.sametcc.me) that makes this even a bit nicer with proper buttons, paning etc. But I could not make it work properly: Everything worked except that it the default view is zoomed on some random part of the diagram rather than showing the whole diagram.
4df38f0 to
54486e1
Compare
Very nice, thanks! As discussed, the only concern was that on mobile there are no more zoom buttons. But apparently this is intentional and one can zoom by pinching. So all good 👍 |
3 participants
The two should represent the same workflow. I would argue that the handcrafted version looks better but it is surely an advantage to have it editable as code.
There is a glitch with boxes that have three lines: The bottom half of the last line is cut off.
How it looks like in the browser (top-down orientation, TD):
This is how it would look like with left-right orientation (LR):
I chose top-down because the paragraph width is rather narrow.
If we use the Zoomable Vue component from this GitHub gist, it looks like this when clicked:
With the vitepress-mermaid-renderer:
Test link