search

y-takey / atom-mermaid

Preview mermaid on atom editor
MIT License
42 stars 7 forks source link

Rendering class diagrams #64

Closed datavectors closed 4 years ago

datavectors commented 4 years ago

I have Atom 1.48 in Ubuntu 18.04. I have two Atom packages relevant to mermaid .. markdown-preview-enhanced atom-mermaid

I like the atom-mermaid feature to export rendered diagram as svg. However it does not render class diagrams.

Markdown-preview-enhanced does render class diagrams, but does not export as svg.

I looked at atom-mermaid/styles/mermaid-variables.less There are ..

/ Flowchart variables / / Sequence Diagram variables / / Gantt chart variables /

but it stops there. No reference to class diagrams.

Can atom-mermaid be extended to render class diagrams in svg?

y-takey commented 4 years ago

Hi @datavectors , thanks for the issue :) I published atom-mermaid@v3.5.2 that support to export class diagram as svg. It seems works fine for me, can you try it?

datavectors commented 4 years ago

Thank you for responding. I have now looked at /atom-mermaid/package.json and saw that it refers to 3.4.1

"_from": "https://www.atom.io/api/packages/atom-mermaid/versions/3.4.1/tarball", "_id": "atom-mermaid@3.4.1",

I uninstalled and reinstalled atom-mermaid 3.5.2 but the example class diagram still does not render correctly.

The first screenshot below shows the output of atom-mermaid preview (note that I do not apply ```mermaid header).

The second screenshot below shows the output of markdown-preview-enhanced (note that here I apply ```mermaid header)

The third screenshot below shows the preview of same markdown in atom-mermaid.

[P.S.] Latest atom-mermaid/styles/mermaid-variables.less still does not reference class diagrams

===================================================== Rendered by atom-mermaid (no ```mermaid header - is that correct syntax)

mermaid

===================================================== Rendered by markdown-preview-enhanced (with ```mermaid header)

mermaid2

===================================================== Rendered by atom-mermaid (with ```mermaid header)

mermaid3

y-takey commented 4 years ago

Thank you for responding. I tried with same your mermaid text, but can't reproduce the issue. it works fine for me. Hmm...

ss-class-diagram

[P.S.] Latest atom-mermaid/styles/mermaid-variables.less still does not reference class diagrams

I guess there is no problem.

datavectors commented 4 years ago

The only point I see is that you use extension .mmd and I use .md but other diagrams work so that cannot be an issue.

To try to debug this at my end, is it possible to insert console log directives into the package to see the expected output or errors in Developer Tools Console?

datavectors commented 4 years ago

Further clues: (a) The class diagram does not render correctly in atom-markdown preview window. (b) The class diagram does render correctly in markdown-preview-enhanced preview window (c) The class diagram saves correctly as png file (d) The class diagram does not save correctly as svg file.

The output files are attached. Note that I had to change .svg extension to .txt since svg is not an accepted file type to upload. Change the extension back to *.svg to view in Inkscape. A screenshot of the incorrect svg image (from Inkscape) is attached.

classes md

class md svg

classes.md.txt

datavectors commented 4 years ago

Adding another clue ..

I tested the svg code in an xml editor and I noticed that the xml declaration is missing as top line. <?xml version="1.0" encoding="UTF-8" standalone="no" ?>

I added this declaration line and I was able to view the svg in Brave browser. But not in Inkscape.

It is puzzling.

y-takey commented 4 years ago

To try to debug this at my end, is it possible to insert console log directives into the package to see the expected output or errors in Developer Tools Console?

No, maybe you can't get some clue from console log. however there may be some clue from inspecting svg element on devtool.

Is the first attached file that screenshot of (c) ? If so, can you open svg file of (d) in Chrome browser?(without xml declaration)

By the way, do you have any user stylesheet on Atom?

y-takey commented 4 years ago

I can open attached classes.md.txt in Chrome browser on my environment.

classes_md_svg

datavectors commented 4 years ago

Since I can work around this issue and render the svg one way or another in browser(s) the only concern now is why it does not render in Inkscape. I hope eventually to edit the svg elements.

y-takey commented 4 years ago

It seems a issue of mermaid-js (and livrsvg). Unfortunately atom-mermaid can't support too. sorry. https://github.com/mermaid-js/mermaid/issues/664

datavectors commented 4 years ago

Thanks for identifying the root cause. I will use a workaround (browser display of svg) until issue fixed by mermaid. I will now close this issue.