search

quiclog / qvis

QUIC and HTTP/3 visualization tools
https://qvis.edm.uhasselt.be
MIT License
177 stars 24 forks source link

Add ability to download sequence diagrams as svg #51

Open mickel8 opened 3 years ago

mickel8 commented 3 years ago

Hi, thanks for your work. This tool is so useful.

I am using it in my master thesis and I wish there was one more feature - ability to download sequence diagram as svg image.

This would allow you to attach such diagrams in papers or thesis as well as modifiy them e.g skip some events, add subtitles, etc.

One thing I was trying to do was to inspect diagram and save HTML svg element but it didn't work for me :/

I can try to make a PR but I would probably need some help

rmarx commented 3 years ago

Hello @mickel8,

Good to hear the tools are useful to you. Please share your master's thesis when it's done (or before ;)), I would be interested in reading it!

There are some issues with your request:

  1. the sequence diagram dynamically generates the SVG on the fly as you scroll (generally: 1 screen height back and 1 screen height forward are rendered) for performance reasons. Direct export of this would probably require post-hoc manual changes, while export of "only what's on screen" is difficult due to arrows starting and ending off-screen (would require extra logic to setup clipping rects etc.)
  2. I'm using some nasty properties of SVG to make things look nice. Mainly: the ability to embed normal HTML (as SVG itself doesn't provide proper text-wrapping for example). This works nicely in the browser, but I've seen many "normal" SVG viewers/program choke on that.
  3. For print, you typically want bigger fonts, thicker arrows, etc. I typically get this by zooming in using the browser built-in zoom and making my window smaller and then taking a pixel screenshot on a high-res screen. Hardly optimal, I agree, but somewhat workable, at least for me.

As such, for now, all I could offer would be a direct SVG export of whatever is rendered internally by the tool without added frills (as those would require implementation work I don't have).

That SVG can be gotten from the Chrome devtools HTML inspector manually as well. You mention you tried this, but it didn't work. Do you have additional info on what didn't work concretely? What did you try? What are you trying to accomplish? Maybe I can help you figure this out if that's sufficient for what you'd need?

In the future, I'd like to add proper export options to qvis for all diagrams (e.g., adjust font sizes, add filtering like you say, etc.) but that's a bigger project than I can take on atm.

mickel8 commented 3 years ago

Please share your master's thesis when it's done (or before ;)), I would be interested in reading it!

Sure! It's nothing special but as soon as it will be ready I will send it to you :wink:

That SVG can be gotten from the Chrome devtools HTML inspector manually as well. You mention you tried this, but it didn't work. Do you have additional info on what didn't work concretely? What did you try? What are you trying to accomplish? Maybe I can help you figure this out if that's sufficient for what you'd need?

I just tried to copy this svg element and save it as diagram.svg. I also tried to save it as raw .html file and print it to pdf. The second option gave me pdf file with diagram but there some colors, labels etc. were missing.

In the future, I'd like to add proper export options to qvis for all diagrams (e.g., adjust font sizes, add filtering like you say, etc.) but that's a bigger project than I can take on atm.

Sounds great! At this moment I am just saving it as png. It's not so comfortable but it works :smile:

rmarx commented 3 years ago

So I just tried this out myself and it's indeed the use of foreignObject that's messing things up.

This means you have to embed the svg inside a proper html tag, like so:

<!doctype html><html><body>
COPY-PASTED SVG HERE
</body></html>

You then also have to add namespace declarations to the svg element itself, for example:

<svg id="sequence-diagram-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" height="1420" width="2025" viewbox="0 0 2025 1420">

Using that, I get everything to show up when viewing the resulting .html file in the browser and I can also print it to PDF (though scaling is sometimes... dubious as I indicated above). There's also a problem with the font being times new roman default, which can be fixed by having on top (right after <body>):

<style>
* { font-family: "Trebuchet MS"; }
</style>

It's not perfect, but maybe with a few more tweaks you can get something workable out of it!

See an example I just made here: svg_test - Copy.zip

mickel8 commented 3 years ago

Thanks a lot!