software architecture diagram about mermaid HOT 13 CLOSED

and another year has passed. this would be really nice !

from mermaid.

sorry about formatting... :)

from mermaid.

something like this:

from mermaid.

Sorry but there are no such functionality today. This would be something like subgraphs in DOT/grapwiz. I am not ruling it out in the future but there are no work going on right now for achieving that right now.

I am open for suggestions of nifty syntax and implementations! :)

from mermaid.

Hi guys,
i have been thinking about a syntax to represent that, and before i venture out in the implementation, i'd like share with you:

graph ||
    A
    B|A
    C|D
    E

the code above wil generate the following diagram:

---------------------------------------------
|                 A                          |
-------------------------------------        |
----------------------------------   |       |
|              B                  |  |       |
----------------------------------    -------  
--------------------    ---------------------
|         C         |  |         D           |
--------------------    ---------------------
---------------------------------------------
|                    E                       |
---------------------------------------------

what do you guys think?

from mermaid.

👍
I am open for more diagram types! And it is great to have more people contributing!

Some comments:

• It would be wise to choose another keyword instead of graph, this will be used for identifying the diagram and directing mermaid to the correct parser/renderer. Maybe architecture or something like that.
• Whats does the '| |' in the top mean, perhaps part of the identifying process?
• When A shares space with in the second row, should it possible to choose the width somehow?

I have updated the structure to accommodate more diagram types easier. I have also put together i guide for adding a new diagram type ( in the wiki ). This outlines the steps required. It is just a draft so if you encounter anything that is unclear, feel free to ask and/or update the guide.

Another comment, if possible, try to stick with d3 for doing the drawing. It is there already so it should be easy to use. This way we don't have to add another dependency for the library. Other drawing tools can ofc be added if there are good reasons for it.

from mermaid.

• It would be wise to choose another keyword instead of graph, this will be used for identifying the diagram and directing mermaid to the correct parser/renderer. Maybe architecture or something like that.

i agree. it could be:

architecture <direction>

available directions: v,^,>,<

• Whats does the '| |' in the top mean, perhaps part of the identifying process?

yes. but if we adopt architecture <direction> syntax, it would not be necesssary anymore.

• When A shares space with in the second row, should it possible to choose the width somehow?

i think the simplest way to do that is using style, right?

from mermaid.

Sounds good. Even easier would be using parts of the full length
A -- 1
A|B --1/2
A|A|B -- 2/3

You decide on which way to go.

from mermaid.

@danilosampaio How is this progressing? Tip: I have come to use flowcharts and subgraphs for similar diagrams which does it quite ok.

from mermaid.

hi @knsv,

it's stucked.
i'm on a steep learning curve in the jison and d3 APIs.
Because of this, i'm using other tool for 'block diagrams'.
I'm not sure if the effort is worth, due to the fact
that, apparently, no one else showed interest in this feature.

from mermaid.

OK, will close this then. Thanks nevertheless!

from mermaid.

3 years have passed, anyone found a good solution to this problem?

from mermaid.

one more year

from mermaid.