question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Better control over flowchart shape sizes, title text for charts

See original GitHub issue

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.?

Issue Analytics

  • State:open
  • Created 4 years ago
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

3reactions
jrcharneycommented, Feb 11, 2020

Good to know. Add it to documentation.

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

1reaction
jrcharneycommented, Feb 18, 2020

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Flowchart Symbols Defined - BreezeTree Software
Descriptions of common flowchart symbols and process mapping shapes. This page lists the symbols, their names, and their common uses.
Read more >
Flowchart Tutorial ( Complete Flowchart Guide with Examples )
The decision shape is represented as a Diamond. This object is always used in a process flow to ask a question. And, the...
Read more >
20+ Flow Chart Templates, Design Tips and Examples
Typically, you use boxes or shapes to represent different steps in a process, and then you connect those steps with lines or arrows....
Read more >
Shape basics: resize, format, move and add text to shapes
To maintain the shape's proportions, drag a corner handle, or hold the Shift key while you drag the handle. Visio displays the width...
Read more >
Flowchart Symbols and Their Usage - EdrawSoft
The control flow chart gives a graphical representation of the algorithm that solves ... Special shapes, process flow, title block, N-type line, text...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found