Mermaid: Better control over flowchart shape sizes, title text for charts

Created on 11 Feb 2020  路  5Comments  路  Source: mermaid-js/mermaid

I've been using Mermaid in Typora for a couple of months now as well on the live editor to see if there is something in Typora that is not working yet.

After taking a look at the source code for the Flow Chart shapes, one of the most vexing issues is how decisions ("questions"?) are rendered in diamonds.

Often I feel like they get too big, even when using <br> for line breaks to wrap the text.

Part of the issue is that diamonds are drawn as diagonal squares rather than rhombuses (rhombii?)

Rendering such a shape shouldn't be that hard, just allow the user better control over the width and height of the shape. I honestly won't mind it that much if the text overflows outside the shape just a little bit. (Though, it might be a good idea to allow the ability to adjust the text size, which I think might already be implemented.)

Is there a way to add some width and height features for shape nodes?

I also noticed that we can create titles for pie charts, but why not for other diagrams like class charts, flow charts, etc.?

Triage Enhancement

Most helpful comment

Good to know. Add it to documentation.

Now there's just the request for better shape size controls to deal with.

All 5 comments

Adding titles for flowchart diagrams relates to #556.

Good to know. Add it to documentation.

Now there's just the request for better shape size controls to deal with.

I would suggest usage of the hexagon shape:
https://mermaid-js.github.io/mermaid/#/flowchart?id=a-hexagon-node

Its not strictly a rectangle but I thing it is more practical:
image

While that is a resourceful idea, that is not what the elongated hexagons are used for.

This guide shows what each of the flowchart symbols are used for. And while it states that IBM (who developed the flowchart shapes) now discourages the use of the elongated hexagon since it wasn't used that much by them, another program called Flowgorithm, presents a better use for this shape: loops.

There are a couple of shapes that Mermaid doesn't seem to recreate that seem to be pretty important still. The symbols for documents, for starters.
image

(Those two shapes were not made in Flowgorithm, but they were in a flow chart that I saw in a class I'm taking.)

There are some symbols that are part of Mermaid that don't seem to be recognized, but I think that has to do with the version of the particular Markdown editor I'm using, an issue I will need to take up with them.

I would appreciate to be able to import custom shapes via SVG image.

I'm working in Japanese company and we have special flow chart (Japanese really, really love Word and Excel hence the special shapes). I would like to modernise flow chart drawing procedure but leave shapes they are already using.

Tried with graphviz but very painful Windows installation because of Cairo lib. Not able to convert custom SVG images to PDF.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

nickwynja picture nickwynja  路  3Comments

pirDOL picture pirDOL  路  3Comments

yk-liu picture yk-liu  路  4Comments

vi picture vi  路  5Comments

michaeltlombardi picture michaeltlombardi  路  3Comments