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.

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

FlowChart visualization broken when downloading from live editor #533

Closed
MoeweX opened this issue May 21, 2017 · 2 comments
Closed

FlowChart visualization broken when downloading from live editor #533

MoeweX opened this issue May 21, 2017 · 2 comments

Comments

@MoeweX
Copy link

MoeweX commented May 21, 2017

Hi,

when I download a flow chart SVG from the live editor, all boxes are empty (the text is not shown), even though the diagram looks fine in the live editor. Other diagrams seem to work.

E.g. this
bildschirmfoto 2017-05-21 um 12 03 21
looks like this
bildschirmfoto 2017-05-21 um 12 04 38
after I downloaded it.

Here is the generated SVG code of the visualization (as txt, because GitHub does not allow SVG).
diagram.txt

Anyone knows what the cause might be?

@MoeweX MoeweX changed the title FlowChart visualization broken in live editor FlowChart visualization broken when downloading from live editor May 21, 2017
@dewiniaid
Copy link

Ran into this problem today as well when attempting to open the SVG files in Inkscape. Oddly enough, subgraph titles would show but not the contents of the various shapes.

It looks like the issue is contents being output like this:

<foreignObject width="219" height="22"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;">Some text here</div></foreignObject>

rather than

<text x="0" y="-90.5" fill="black" stroke="none" id="mermaidChart892Text" style="text-anchor: middle;">Some text here</text>

Chrome can render the SVG correctly (no surprise, really, because I think the SVG is what you're seeing in realtime in the editor), but Inkscape cannot and I suspect many other SVG tools cannot either.

Note the CLI known issues currently state:

  • SVG output currently does some replacement on text, as mermaid's SVG output is only appropriate for browsers. Text color and background color is not yet replicated; please use PNGs for most purposes until this is resolved.
  • SVG output is decidedly non-standard. It works, but may cause issues in some viewers.

@tylerlong
Copy link
Collaborator

Try again: https://mermaidjs.github.io/mermaid-live-editor

Feel free to reopen or create a new issue.

mgenereu pushed a commit to mgenereu/mermaid that referenced this issue Jun 25, 2022
Bumps [analytics](https://github.com/DavidWells/analytics) from 0.7.18 to 0.7.19.
- [Release notes](https://github.com/DavidWells/analytics/releases)
- [Commits](https://github.com/DavidWells/analytics/compare/[email protected]@0.7.19)

---
updated-dependencies:
- dependency-name: analytics
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <[email protected]>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants