Mermaid: software architecture diagram

[danilosampaio]

hi @knsv ,

is there a way to create a architecture diagram? something like:

---

| front-end libraries |
| --- |
| midleware |

---

| nodejs | other services |

---

thanks.

[danilosampaio]

sorry about formatting... :)

[danilosampaio]

something like this:

[knsv]

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! :)

[danilosampaio]

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?

[knsv]

:+1:
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.

[danilosampaio]

• _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?

[knsv]

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.

[knsv]

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

[danilosampaio]

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.

[knsv]

OK, will close this then. Thanks nevertheless!

[SamuelMarks]

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

[pbhogale]

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

[rsbh]

one more year