search

mermaid-js / mermaid

Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
https://mermaid.js.org
MIT License
70.69k stars 6.34k forks source link

Mixing orientations #3937

Open jcurtis-cc opened 1 year ago

jcurtis-cc commented 1 year ago

Proposal

Right now Mermaid doesn't seem to support mixing vertical and horizontal layouts. There are hacks with subgraphs, but subgraphing loses you the ability to connect the correct node in a class diagram for instance.

See this SO question for more detail/examples

Example

Current

classDiagram
direction RL

class FactoryClass
FactoryClass : +type field
FactoryClass : +createObject() IProduct

class IProduct
<<Interface>> IProduct
IProduct : +type field

class ConcreteProduct
ConcreteProduct : +type field

class ConcreteProductA
ConcreteProductA : +type field

class ConcreteProductB
ConcreteProductB : +type field

class ConcreteProductC
ConcreteProductC : +type field

FactoryClass <--o `Client Application` : aggregates
FactoryClass o--> IProduct : aggregates
ConcreteProduct ..|> IProduct : implements
ConcreteProductA --|> ConcreteProduct : extends
ConcreteProductB --|> ConcreteProduct : extends
ConcreteProductC --|> ConcreteProduct : extends

Proposed

classDiagram

class FactoryClass
FactoryClass : +type field
FactoryClass : +createObject() IProduct

class IProduct
<<Interface>> IProduct
IProduct : +type field

class ConcreteProduct
ConcreteProduct : +type field

class ConcreteProductA
ConcreteProductA : +type field

class ConcreteProductB
ConcreteProductB : +type field

class ConcreteProductC
ConcreteProductC : +type field

%% set the orientation here
direction RL
FactoryClass <--o `Client Application` : aggregates
FactoryClass o--> IProduct : aggregates
%% change the orientation here
direction UD
ConcreteProduct ..|> IProduct : implements
%% set the orientation back to horizontal here
direction RL
ConcreteProductA --|> ConcreteProduct : extends
ConcreteProductB --|> ConcreteProduct : extends
ConcreteProductC --|> ConcreteProduct : extends

Screenshots

No response

jgreywolf commented 1 year ago

This has come up as a request more than once. I will have to go through the way back machine to see if I can find some of the older issues to understand status...

NicolasCwy commented 6 months ago

This is the same for gitgraphs and I found I needed this when I was amending the MermaidJs docs and only wanted to change one of the examples. This wasn't possible and changed all subsequent diagrams to be a different orientation

stefnotch commented 6 months ago

Is this the same issue as https://github.com/mermaid-js/mermaid/issues/3909 ?