Hello,

The version included at

For this code (the default example):

graph TD
	A[Christmas] -->|Get money| B(Go shopping)
	B --> C{Let me think}
	C -->|One| D[Laptop]
	C -->|Two| E[iPhone]
	C -->|Three| F[fa:fa-car Car]

In SVG, there is an icon in the "Car"
but if click on Download PNG, the icon is missed

Describe the bug
Gantt Chart : The narrator navigation of the svg is not in right sequence

To Reproduce
Steps to reproduce the behavior:

1. Go to Gantt Chart in Edge browser
2. Launch screen reader as narrator and navigate to the mermaid using caps+arrow key.

Expected behavior
Screen reader should announce the information in a logical sequence , top to bottom and left to right .

** Actual behavior**

1. On navigating to the image using caps+arrow key , narrator announces information of the image from bottom to top and right to left.

User Impact:​
The screen reader users will not receive the image context in the right sequence.

Screenshots

See attached gif recording

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Hi there,

I've set up a VM locally so people in my office can use mermaid-live-editor. I've run yarn install and then yarn build. What do I need to do to have it running permanently?

Right now I have Nginx doing proxy_pass to port 8080, after I run yarn run dev. Is that really how it is intended to be used?

Thanks!

I'm a big fan of the mermaid live editor, and use it all the time for quick project / PR documentation in my projects. While in the middle of working on some flowcharts today, I reloaded the page to find that the colors switched quite drastically to a "dark mode".

It looks like prefers-color-scheme support was added to the live editor recently and must've just been deployed. I think it's very cool to build in a dark mode and prefers-color-scheme support, but for me personally, the live editor's dark color scheme is much harder to use than the default "light" scheme.

It would be really cool if the user could select which theme to use instead of forcing the user to use the theme based on their system setting.

please include a license file. Thank you

Exception case: image export failure caused by using br tag

The problem comes from the browser engine will not close when rendering the br node: https://github.com/mermaid-js/mermaid/blob/e3cf8b78437bb542029e91a022c81fbd4d361e6a/src/dagre-wrapper/createLabel.js#L68

No matter whether you close the br node yourself; when the browser renders, what you get through innerHTML is always the unclosed br.

When exporting svg as a picture, it will think that the unclosed br node belongs to abnormal grammar, causing the exported picture to be invalid.

I think it would benefit greatly to add the example of having images in flowcharts in the Flow chart sample diagram. Having images in flowchart would be a very typical use case.

For instance, this edit link leads to the right diagram, but with the incorrect source code (the default example code).

When I used the live editor about a month ago, the edit link would have the correct Mermaid JS source code on the left that matched with the saved diagram on the left. Now all the edit links that previously did that load up the code editor with the default code.

graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]

Acceptance Criteria

1. An edit link should load both the expected diagram as well as the Mermaid JS source code

The link to the live editor from the docs is broken.

https://mermaid-js.github.io/mermaid-live-editor/#/edit/dW5kZWZpbmVk

I can see the following error in the console:

bundle.js:419 Uncaught TypeError: Cannot set property 'code' of undefined
    at ye (bundle.js:419)
    at lI (bundle.js:419)
    at uI (bundle.js:419)
    at HTMLButtonElement.nI (bundle.js:419)

Browser Chrome: Version 87.0.4280.88 (Official Build) (x86_64)

On macOS (macbook), when I go to the live editor in Safari, the markers at the ends of the lines are missing for Sequence, Class, and State Diagrams. The new ER diagram type is also a victim of this issue in the beta release. Here's what the Live Editor default class diagram looks like in Firefox (still on macOS):

All good. But here it is in Safari:

I thought this might be something to do with a base tag, but I can't find one in the live editor code and setting the config option arrowMarkerAbsolute to true makes no difference.

I have logged this as a Live Editor issue only (for now) because if I write my own local html file containing the exact same class diagram and render it using the API, it works even in Safari:

<html>
  <body>
    <script type="text/javascript" src="../mermaid/dist/mermaid.js"></script>
    <script>
      mermaid.initialize({startOnLoad:true, logLevel:1});
    </script>

    <p>Here is a class diagram...</p>
    <div class="mermaid">
        classDiagram
                Animal <|-- Duck
                Animal <|-- Fish
                Animal <|-- Zebra
                Animal : +int age
                Animal : +String gender
                Animal: +isMammal()
                Animal: +mate()
                class Duck{
                        +String beakColor
                        +swim()
                        +quack()
                }
                class Fish{
                        -int sizeInFeet
                        -canEat()
                }
                class Zebra{
                        +bool is_wild
                        +run()
                }
    </div>
  </body>

</html>

Output:

So it seems that something in the live editor, not the core API, is amiss.

Note that flowcharts work fine (and Pies and Gantts do not use markers so are unaffected). I think flowchart delegates rendering to dagreD3 so the svg is constructed differently. Fixing this issue might therefore require enhancements to the core library, but more diagnosis is needed before we know this.

• OS: macOS Mohave 10.14.6
• Browser: Safari 13.0.5

Hello,

I see you provide a Dockerfile but don't provide an official build of the image anywhere. Would you be open to an automatic publishing on GitHub Packages on each change on the branch master (so that the image is always up to date) using Github Actions?

I tried it on my fork and it was pretty easy:

• I created the action file: https://github.com/Thiht/mermaid-live-editor/blob/master/.github/workflows/docker-publish.yml (I just changed the IMAGE_NAME, everything else is a copy paste from the official docker-publish workflow
• And that's it, the action is executed at every change on master and the image appears on the Packages section of the repo: https://github.com/Thiht/mermaid-live-editor/packages/512573

If you want it I can create a pull request

I've been using the live editor for some time and the workflow to make an edit and post to slack can be

1. Download image, attach (Downloads is now cluttered with images)
2. Open image view, copy image from new tab, paste, close tab.

Having a copy image button would be a very useful productivity boost as only a single click will be needed.

I'm willing to raise a PR if this can be included.

From mermaid-js/mermaid#1272

Original

Describe the bug

Clicking on download png results in an empty png file

To Reproduce

Steps to reproduce the behavior:

1. Go to mermaid live editor
2. Click on sequence diagrams
3. Click on download png
4. An empty white png file is downloaded

Expected behavior

The image of the sequence diagram created

Desktop (please complete the following information):

• OS: Windows 10
• Browser Firefox
• Mermaid version 8.4.8

Additional

Issue is still present.

Note: Image size varies according to width/height settings or in auto mode it gets the correct size to fit the diagram, but the image is completely white (not transparent) in all cases. "Link to Image" produces a valid JPEG.

Desktop (please complete the following information):

• OS: Linux (Fedora 32)
• Browser Firefox 82.0.3 (64 bits)
• Mermaid version 8.8.3

Tests are required to confirm that new releases do not break links created using older versions.

Reason : This link mentioned in #57 should be showing the sequence diagram, but loads the default flow chart.
#71 might be related to an error in initialising old state.

https://mermaid-js.github.io/mermaid-live-editor/#/view/eyJjb2RlIjoic2VxdWVuY2VEaWFncmFtXG4gICAgQWxpY2UtPj4rSm9objogSGVsbG8gSm9obiwgaG93IGFyZSB5b3U_XG4gICAgQWxpY2UtPj4rSm9objogSm9obiwgY2FuIHlvdSBoZWFyIG1lP1xuICAgIEpvaG4tLT4-LUFsaWNlOiBIaSBBbGljZSwgSSBjYW4gaGVhciB5b3UhXG4gICAgSm9obi0tPj4tQWxpY2U6IEkgZmVlbCBncmVhdCFcbiAgICAgICAgICAgICIsIm1lcm1haWQiOnsidGhlbWUiOiJkZWZhdWx0IiwidGhlbWVWYXJpYWJsZXMiOnsiYmFja2dyb3VuZCI6IndoaXRlIiwicHJpbWFyeUNvbG9yIjoiI0VDRUNGRiIsInNlY29uZGFyeUNvbG9yIjoiI2ZmZmZkZSIsInRlcnRpYXJ5Q29sb3IiOiJoc2woODAsIDEwMCUsIDk2LjI3NDUwOTgwMzklKSIsInByaW1hcnlCb3JkZXJDb2xvciI6ImhzbCgyNDAsIDYwJSwgODYuMjc0NTA5ODAzOSUpIiwic2Vjb25kYXJ5Qm9yZGVyQ29sb3IiOiJoc2woNjAsIDYwJSwgODMuNTI5NDExNzY0NyUpIiwidGVydGlhcnlCb3JkZXJDb2xvciI6ImhzbCg4MCwgNjAlLCA4Ni4yNzQ1MDk4MDM5JSkiLCJwcmltYXJ5VGV4dENvbG9yIjoiIzEzMTMwMCIsInNlY29uZGFyeVRleHRDb2xvciI6IiMwMDAwMjEiLCJ0ZXJ0aWFyeVRleHRDb2xvciI6InJnYig5LjUwMDAwMDAwMDEsIDkuNTAwMDAwMDAwMSwgOS41MDAwMDAwMDAxKSIsImxpbmVDb2xvciI6IiMzMzMzMzMiLCJ0ZXh0Q29sb3IiOiIjMzMzIiwibWFpbkJrZyI6IiNFQ0VDRkYiLCJzZWNvbmRCa2ciOiIjZmZmZmRlIiwiYm9yZGVyMSI6IiM5MzcwREIiLCJib3JkZXIyIjoiI2FhYWEzMyIsImFycm93aGVhZENvbG9yIjoiIzMzMzMzMyIsImZvbnRGYW1pbHkiOiJcInRyZWJ1Y2hldCBtc1wiLCB2ZXJkYW5hLCBhcmlhbCIsImZvbnRTaXplIjoiMTZweCIsImxhYmVsQmFja2dyb3VuZCI6IiNlOGU4ZTgiLCJub2RlQmtnIjoiI0VDRUNGRiIsIm5vZGVCb3JkZXIiOiIjOTM3MERCIiwiY2x1c3RlckJrZyI6IiNmZmZmZGUiLCJjbHVzdGVyQm9yZGVyIjoiI2FhYWEzMyIsImRlZmF1bHRMaW5rQ29sb3IiOiIjMzMzMzMzIiwidGl0bGVDb2xvciI6IiMzMzMiLCJlZGdlTGFiZWxCYWNrZ3JvdW5kIjoiI2U4ZThlOCIsImFjdG9yQm9yZGVyIjoiaHNsKDI1OS42MjYxNjgyMjQzLCA1OS43NzY1MzYzMTI4JSwgODcuOTAxOTYwNzg0MyUpIiwiYWN0b3JCa2ciOiIjRUNFQ0ZGIiwiYWN0b3JUZXh0Q29sb3IiOiJibGFjayIsImFjdG9yTGluZUNvbG9yIjoiZ3JleSIsInNpZ25hbENvbG9yIjoiIzMzMyIsInNpZ25hbFRleHRDb2xvciI6IiMzMzMiLCJsYWJlbEJveEJrZ0NvbG9yIjoiI0VDRUNGRiIsImxhYmVsQm94Qm9yZGVyQ29sb3IiOiJoc2woMjU5LjYyNjE2ODIyNDMsIDU5Ljc3NjUzNjMxMjglLCA4Ny45MDE5NjA3ODQzJSkiLCJsYWJlbFRleHRDb2xvciI6ImJsYWNrIiwibG9vcFRleHRDb2xvciI6ImJsYWNrIiwibm90ZUJvcmRlckNvbG9yIjoiI2FhYWEzMyIsIm5vdGVCa2dDb2xvciI6IiNmZmY1YWQiLCJub3RlVGV4dENvbG9yIjoiYmxhY2siLCJhY3RpdmF0aW9uQm9yZGVyQ29sb3IiOiIjNjY2IiwiYWN0aXZhdGlvbkJrZ0NvbG9yIjoiI2Y0ZjRmNCIsInNlcXVlbmNlTnVtYmVyQ29sb3IiOiJ3aGl0ZSIsInNlY3Rpb25Ca2dDb2xvciI6InJnYmEoMTAyLCAxMDIsIDI1NSwgMC40OSkiLCJhbHRTZWN0aW9uQmtnQ29sb3IiOiJ3aGl0ZSIsInNlY3Rpb25Ca2dDb2xvcjIiOiIjZmZmNDAwIiwidGFza0JvcmRlckNvbG9yIjoiIzUzNGZiYyIsInRhc2tCa2dDb2xvciI6IiM4YTkwZGQiLCJ0YXNrVGV4dExpZ2h0Q29sb3IiOiJ3aGl0ZSIsInRhc2tUZXh0Q29sb3IiOiJ3aGl0ZSIsInRhc2tUZXh0RGFya0NvbG9yIjoiYmxhY2siLCJ0YXNrVGV4dE91dHNpZGVDb2xvciI6ImJsYWNrIiwidGFza1RleHRDbGlja2FibGVDb2xvciI6IiMwMDMxNjMiLCJhY3RpdmVUYXNrQm9yZGVyQ29sb3IiOiIjNTM0ZmJjIiwiYWN0aXZlVGFza0JrZ0NvbG9yIjoiI2JmYzdmZiIsImdyaWRDb2xvciI6ImxpZ2h0Z3JleSIsImRvbmVUYXNrQmtnQ29sb3IiOiJsaWdodGdyZXkiLCJkb25lVGFza0JvcmRlckNvbG9yIjoiZ3JleSIsImNyaXRCb3JkZXJDb2xvciI6IiNmZjg4ODgiLCJjcml0QmtnQ29sb3IiOiJyZWQiLCJ0b2RheUxpbmVDb2xvciI6InJlZCIsImxhYmVsQ29sb3IiOiJibGFjayIsImVycm9yQmtnQ29sb3IiOiIjNTUyMjIyIiwiZXJyb3JUZXh0Q29sb3IiOiIjNTUyMjIyIiwiY2xhc3NUZXh0IjoiIzEzMTMwMCIsImZpbGxUeXBlMCI6IiNFQ0VDRkYiLCJmaWxsVHlwZTEiOiIjZmZmZmRlIiwiZmlsbFR5cGUyIjoiaHNsKDMwNCwgMTAwJSwgOTYuMjc0NTA5ODAzOSUpIiwiZmlsbFR5cGUzIjoiaHNsKDEyNCwgMTAwJSwgOTMuNTI5NDExNzY0NyUpIiwiZmlsbFR5cGU0IjoiaHNsKDE3NiwgMTAwJSwgOTYuMjc0NTA5ODAzOSUpIiwiZmlsbFR5cGU1IjoiaHNsKC00LCAxMDAlLCA5My41Mjk0MTE3NjQ3JSkiLCJmaWxsVHlwZTYiOiJoc2woOCwgMTAwJSwgOTYuMjc0NTA5ODAzOSUpIiwiZmlsbFR5cGU3IjoiaHNsKDE4OCwgMTAwJSwgOTMuNTI5NDExNzY0NyUpIn19LCJ1cGRhdGVFZGl0b3IiOmZhbHNlfQ

Hi,

Looking at the code I can see how the "Download PNG/SVG" links work on the page, from a "view" based URL.

I was wondering if it is possible to trigger the download functions remotely - so if another website is creating mermaid diagrams, users could use the Live Editor to create and download an image directly from a url?

It is not a big deal to go to the page and then click the download option, but I was just curious.

Thanks

Joe

<br> is supported in sequence diagrams both in live editor and when SVG/PNG files are generated.

In normal graphs it is supported in live editor, but the downloaded SVG is broken and PNG generation fails completely:

graph TD
  A[Christmas] -->|Get money| B("Go<br>shopping")
  B --> C{Let me think}
  C -->|One| D[Laptop]
  C -->|Two| E[iPhone]
  C -->|Three| F[fa:fa-car Car]

Platform: Windows 10 Pro
Browser: Firefox 80

Mermaid live editor seems to disable some keyboard navigation key sequences, like Ctrl+Left arrow to quickly move across words and Ctrl+Shift+Left arrow to quickly select words.

Is this a bug or intentional for a feature?

For me, this is a bug, since I use keyboard navigation constantly.

mermaid allows to encode the whole diagram code into the URL, both to open live editor and to open SVG.

Is it possible instead of passing the whole diagram code via URL, to pass the URL of the file with the code (as a link to raw github file) to get both the link to live editor that would load this file into the editor and the link to the generated SVG (to embed in github MD file).

As github caches images anyway it should not overload live editor, and also should allow not storing SVG files in the repo (as I do now - I tried using CLI to generate SVG files, but CLI in npm seems to be behind live editor).

Most likely I am missing something and it is explained somewhere...

The widths of the editors are not updated when we resize the browser window.

There is an easy work-around though, we simple need to reload the tab or browser window (no diagram data lost) and the editors fit again.

Problem to solve

Mermaid live editor is good. But some times we need to edit the diagram in a certain which is not possible using mermaid. If we could export to the format which can be imported to draw.io then it would be very helpful.

Intended users

User who want to quickly make a diagram and tweak it a little bit. for example, put a entire diagram in a square and export it to PDF. or add a title on the top or bottom of the diagram.

Proposal

Add a link in a action section like export to jgraph or export to draw.io

Links / references

• https://www.draw.io/
• https://github.com/jgraph/drawio

Nevermind, I'm terribly sorry. I must have missed the docs link.

Live view shows diagrams twice.
Example

If I have a non-trivial graph I'd like a way to save off what I have done and come back later. This could be done by simply copying the code but there is no provision (at least using Chrome on Windows) to allow you to save the code. Right click won't do it. Ctrl - C won't do it either.

With the new history feature, the main code editor is pushed out of the view.

@ileler @knsv How does this look?
As the code editor and diagram are the top priority in the page, they are always on top.

Dear mermaid-live-editor team,

it seems that long section titles are overlapping with the rest of the gantt diagram.

Maybe it's my fault. If so, how could I fix it?

(I used Google Chrome.)

when doing ayarn install I get an error:

error An unexpected error occurred: "http://pacman01.inkclub.local:4873/mermaid/-/mermaid-8.4.2.tgz: getaddrinfo ENOTFOUND pacman01.inkclub.local".

I assume that is caused by the "pacman01.inkclub.local" URLs used for some packages.
Deleting the yarn.lock and then executing yarn install runs without error.

Looks like bi directional arrows are not supported in the live editor.

Example - simple

graph LR

	A <--> B
        C <==> D

Screen Shot

If you go to the following live editor in this link, and click the Link to Image or Link to SVG buttons, you'll see a message like this:

The last line of the message above (It is possible that your request contains an unexpectedly long value.) makes me think Cloudflare is limiting URL length somewhere.

Indeed, if the last line in the code editor above is eliminated, then the buttons now show proper images of the mermaid diagram.

For reference, here is the code in that first live editor link:

gantt
    title Broken Gantt Image in Live Editor
    excludes    weekends
    dateFormat  YYYY-MM-DD

    A Task :atask, 2020-12-01, 2d
    Another Task :anothertask, after atask, 3d

    %% A Very Long comment spanning many chars 00
    %% A Very Long comment spanning many chars 01
    %% A Very Long comment spanning many chars 02
    %% A Very Long comment spanning many chars 03
    %% A Very Long comment spanning many chars 04
    %% A Very Long comment spanning many chars 05
    %% A Very Long comment spanning many chars 06
    %% A Very Long comment spanning many chars 07
    %% A Very Long comment spanning many chars 08
    %% A Very Long comment spanning many chars 09
    %% A Very Long comment spanning many chars 10

Removing the very last comment line above makes the resulting image viewable.

Firefox 85.0 (64-bit) macOS

Throws ReferenceError: ClipboardItem is not defined

Is your feature request related to a problem? Please describe.

Why are the mermaid links to live editors so long? Could you use a link shortener?

Describe the solution you'd like

Shorter links when I share a live editor of the mermaid diagram I've drawn.

Describe alternatives you've considered

Using a link shortener with my mermaid graphs.

The current version is not usable on mobile (iPhone X).

Bringing the preview below the text input probably would help already.

While playing with the live editor I realized there was no way to hide the today line having a css file, which is not an option in the Live Editor.

https://github.com/mermaid-js/mermaid/blob/master/src/diagrams/gantt/ganttRenderer.js#L102

Apologies if this is the wrong place. This only occurs when clicking "Download SVG" or "Link to SVG" but I'm not sure how this is all connected together to raise on the appropriate issue tracker.

I am using a line break in a node in order to prevent it being too long as below:

graph TD
  A[Lorem ipsum dolor sit amet,<br />consectetur adipiscing elit.]

Live Editor Link

This works fine in the live editor but when exported as an SVG it results in a syntax error because the tag is changed to <br> making it invalid XML. Replacing the tag with <br /> fixes the syntax error.

As it quite hard to remember Mermaid syntax, I think it's better to have a bottom toolbar to insert mermaid snippets into current cursor position.

Here is a draft version of the editor.

In my fork, althought I was able to inject the snippet after current cursor, some how the alignment of the code is not correctly handled.

Is there any roadmap for live editor to have this feature?

Thanks,

The existing live editor does not render and throws errors when selecting a chart type with a console error in the bundle:

URL: https://mermaid-js.github.io/mermaid-live-editor/#/edit/dW5kZWZpbmVk

I tried this on various browsers / OSs

Mermaid Live Editor on Feb 3 2020is chopping off suffixes from the image. Example:

graph TD
    subgraph MyTestSection
	A[LT1]
    end
    subgraph MyTestSection2
	B[LT2]
    end
    A --> |TEST_TEST_TEST| C

Image for the same is posted below

Is there a guide with an example of using source files (src - folder) to run a local copy of the live editor? The demo version (docs folder) it is not clear to configure.

Hi there

I have some mermaid charts in documents that are a bit to big to view nicely on GitHub, so I wanted to link to the online editor to display an SVG in a new window.

I had to browse the source of this repo to work out that that url parameter is a base64 encoded representation of the markdown, and it seems like we could save other people the trouble by adding some documentation

Thanks, Cedd

Hi all

Problem: There are seven(!?) fonts being used on the single page.

• Tahoma
• Playfair Display
• Times New Roman
• Roboto
• Courier New
• Consolas
• Trebuchet M

Solution: I'd like to try consolidate into two fonts across the page, off the cuff I'd go for Consolas for code (to match VS-Code) and Trebuchet MS for everything else. I wanted to first check if people agreed with me or not before I worked on a PR.

Share and enjoy
Tom

Hi, this is a nice work.

I want to self-hosting this project, so I should define constant variable,
such as url, link path,
can I?

I am unable to perform a yarn install of this repo, as the @mermaid-js/mermaid seems to not exist on the yarn package repo.

Console log as follows:

yarn install v1.19.2
info No lockfile found.
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files.
 To clear this warning, remove package-lock.json.
[1/4] Resolving packages...
warning jsonlint > [email protected]: Package no longer supported. Contact [email protected] for more info.
error An unexpected error occurred: "https://registry.yarnpkg.com/@mermaid-js%2fmermaid: Not found".
info If you think this is a bug, please open a bug report with the information provided in "/<snip>/mermaid-live-editor/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

When I start the live editor locally, it says:

Legacy live editor - no longer maintained

Please add a warning to the README that says this.

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'https://mermaid-js.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggVERcbiAgICBURVNUXG4gICAgICAgICAgICAiLCJtZXJtYWlkIjp7fSwidXBkYXRlRWRpdG9yIjpmYWxzZX0
2. Click on "link to view"
3. See error

Expected behavior
The Diagram should be shown but it's not.

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser chrome
• Version 87.0.4280.141

Smartphone (please complete the following information):
not tested

There are multiple programs named yarn apparently. apt install yarn is definitely the wrong thing to do. Since maybe not everybody has yarn, or even knows what yarn is, I think the README ought to point to yarn documentation.

Hello from France !

Many thanks to share this wonderful Tool !

As a teacher, I will use it with french student and college, so I've worked to translate it in French.

You can find the mermaid/docs/bundle.js in French here : https://msieursvp.fr/nextcloud/s/iNeYZPANwQ4P646

Have a good day !

In Links section of live editor, Mermaid CLI is pointing to broken link https://github.com/mermaid-js/mermaid.cli. The correct link would be https://github.com/mermaid-js/mermaid-cli.

Issue is in this line of code
https://github.com/mermaid-js/mermaid-live-editor/blob/master/src/routes/Edit.svelte#L232

One of the things that prevents me from using mermaid is the difficulty of sharing. If I want to share with someone I have to compile it to an image or send a gigantic link with the live editor.

The link seems to just have the base64 encoded data, which makes sense because there is no cost for storage.

The problem is anytime someone changes something the link diverges.

Is there a solution where either free storage, or customer controlled storage could be used so that an identifier, rather than the data itself, could be added to the url.

A basic idea would be allowing users to login with their google account, and add the data to their google drive, and add the document id as part of the url, which would then load the data from the browser. The person who owns the document in google drive would then also be able to control who has access to the document.

Hi,

Just a quick suggestion to make developing/testing a little bit easier:

By adding

watchOptions: {
   poll: true
},

to the webpack plugin, causes the "yarn dev" mode to auto-reload whenever you save a change to disk.

Cheers !

Adding a class definition to a classDiagram may crash the browser tab so that it becomes unresponsive and has to be closed.
The URL is updated, so if we copy that before closing the tab, we can open the editor again with the full diagram.

Steps to reproduce: With google chrome 79.0.3945.117, live-editor is 8.4.5, enter the following diagram code:

classDiagram
  A-->B
  B-->C
  class B {
   +a()
  }

Now try to enter class A { in a line before class B {. The tab crashes when we enter the {.

Chrome devTools report: "Paused before potential out-of-memory crash".