Mermaid: Allow diagram author to set direction of orientation in subgraph

Created on 25 Jul 2020  路  3Comments  路  Source: mermaid-js/mermaid

Describe the bug

Currently Left-to-Right Orientation (LR) is only applied on the toplevel if a _flowchart_ contains a subgraph. Subgraphs do not share that orientation but renders in a perpendicular orientation.

It would be much better for the diagram author to be able to set the orientation in the subgraph like in the example below:

subgraph LR "Query"
  SF --> CE
end

To Reproduce current behaviour

flowchart  LR
subgraph Query
    SF-->CE
end

image

Expected behavior

image

Desktop:

  • OS: [Windows 10]
  • Browser [Obsidian]
  • Version [Obsidian v0.8.1 ]

Additional context

https://obsidian.md

Side Note

Why does the default arrow not match the rest of the graphic elements in _flowchart_? The arrow point should match the arrow lines, like _graph_ and the other formats. Otherwise it looks terrible.

_graph_ arrow is
arrowhead17454
_flowchart_ arrow is
flowchart-pointEnd

Flow Enhancement

Most helpful comment

I could see your rationale behind rendering this way with subsections. But yes, it is unexpected that it ignores the parent settings.

It's a considerably more brilliant solution to allow granular orientation settings for subsections subgraph LR "Query", than to merely adopt the parent orientation. Bravo!

As for the arrow style, I was objecting to the inconsistent color in my rendering. If it's possible to adjust that, I have yet to figure out how. It's great to hear that there's an overhaul in the works. Easier custom theming would be nice for establishing a personal style.

Thanks

All 3 comments

The reason I picked that way of rendering was to avoid the diagrams becoming too tall. I can see how this could be unexpected and in some cases unwanted.

I think the best thing would be to expand the syntax to it is possible to choose that:

subgraph LR "Query"
  SF --> CE
end

This should be investigated. As in investigated if it can be done without breaking backwards compatibility.

I will approve this one and reformulate it a little.

Comment on the sidenote: The reason for the new arrowhead difference is that flowchart allows more types of arrowheads like circle/cross etc. Is it the size you are reacting to or the difference in color in your rendering? If it is regarding the color difference that will change in 8.7 where dynamic theming will be introduced. In that release the themes are getting an overhaul together with rendering tests of them. Also introduction of easier custom theming.

image

If there is something that needs to change, please add a separate issue for it.

I could see your rationale behind rendering this way with subsections. But yes, it is unexpected that it ignores the parent settings.

It's a considerably more brilliant solution to allow granular orientation settings for subsections subgraph LR "Query", than to merely adopt the parent orientation. Bravo!

As for the arrow style, I was objecting to the inconsistent color in my rendering. If it's possible to adjust that, I have yet to figure out how. It's great to hear that there's an overhaul in the works. Easier custom theming would be nice for establishing a personal style.

Thanks

Was this page helpful?
0 / 5 - 0 ratings

Related issues

erelling picture erelling  路  3Comments

tokyo786 picture tokyo786  路  3Comments

gvlx picture gvlx  路  5Comments

init-dcat-ap-de picture init-dcat-ap-de  路  3Comments

The-Alchemist picture The-Alchemist  路  4Comments