Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add ability to download sequence diagrams as svg #51

Open
mickel8 opened this issue Jun 19, 2021 · 4 comments
Open

Add ability to download sequence diagrams as svg #51

mickel8 opened this issue Jun 19, 2021 · 4 comments

Comments

@mickel8
Copy link

mickel8 commented Jun 19, 2021

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
Copy link
Member

rmarx commented Jun 22, 2021

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
Copy link
Author

mickel8 commented Jul 1, 2021

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 😉

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 😄

@rmarx
Copy link
Member

rmarx commented Jul 2, 2021

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
Copy link
Author

mickel8 commented Jul 3, 2021

Thanks a lot!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@rmarx @mickel8