Would a 'stack diagram' be of interest?

[cmorganBE]

I often have a need to create stack diagrams, example below.

Would there be any interest in accepting a pull request that creates these kinds of diagrams? I think it wouldn't be too bad to capture the technique I use to create them and implement it in code, but wanted to confirm interest before starting on the effort.

[knsv]

Yes it would! 👍

[ileixe]

Definitely 👍

[cmorganBE]

I'll have some time off around the holidays and will dig in then, so if someone has the work planned before then please reach out (chmorgan@gmail.com), or give me until end of year :-)

[brian-methodical]

I would find this useful.

[eliaskanelis]

Is this implemented and merged? It is very useful for my needs.

[cmorganBE]

@eliaskanelis wow, august 2022, time flies... I'd like to take a crack at this during the next break I have, likely during a holiday but I'd also gladly use it if someone else puts it together earlier :-)

[eliaskanelis]

My expertise is C and C++ as I am an embedded engineer. I know some JavaScript, but at a hobby level. I have some spare time to help, but I am limited to my lack of expertise on web development. Could I help somehow?

[sidharthv96]

The first step would be to decide on a syntax that we can use.
@knsv is this similar to the block diagram that you are working on?

[eliaskanelis]

I have done some brainstorming with a few people from work, and we came to this draft:

stack:
  style: {fill: black,4pt,...}
  layer:
    block:
      style: {fill: black,4pt,...} # Inherited if not assigned from parent
      [App1]->[RTOS]
    block:
      [App2]->[RTOS]
    block:
      ["Bare metal app"]->[RTOS, Microcontroller]
  layer:
    block:
      [RTOS]->[HAL]
  layer:
    block:
      [HAL]->[SPI, I2C, UART, Microcontroller]
  layer:
    block:
      [SPI]->[Microcontroller]
    block:
      [I2C]->[Microcontroller]
    block:
      [UART]->[Microcontroller]
  layer:
    block:
      [Microcontroller]

The mermaid syntax draft tries to describe the following.

I hope this helps. I might not know JS to aid in coding, but I can help in other areas.

As a first draft, I see layers and blocks. After that, we could introduce stackable stacks... Or it might become too complicated? I have no experience with the mermaid code.

[sidharthv96]

@cmorganBE the shared sample looks very similar to the packet-diagram that I've been building here

---

@eliaskanelis, your example looks interesting. Are the vertical stacks taken from some reference images?
Can you share some sources to get some more examples?

[eliaskanelis]

@sidharthv96 yes sure! It is called layered architecture. I found some more pictures from the web.

In the automotive domain, there is something called AutoSar.

It would be cool if mermaid could be used to draw these diagrams.

Other random photos

Photo 1
Photo 2
Photo 3

[pandres95]

Strong 👍

I seriously need this kind of diagrams.

[PHHENS]

Seems interesting ... any news ?

[rhysb27]

@pandres95 @PHHENS does Mermaid's Block diagram meet your requirements?

[PHHENS]

Thanks for your notification. Yes, it seems promising. Any way to insert an svg image into a block ? Thanks Le dim. 7 juil. 2024 à 03:52:15 -07:00:00, Rhys B ***@***.***> a écrit :

…

@pandres95 <https://github.com/pandres95> @PHHENS <https://github.com/PHHENS> does Mermaid's Block diagram <https://mermaid.js.org/syntax/block.html> meet your requirements? — Reply to this email directly, view it on GitHub <#3307 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AI2HQZHU3PCE6Y3VRNBUY23ZLEMV7AVCNFSM56AROTQKU5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TEMRRGI2DANRVGYZA>. You are receiving this because you were mentioned.Message ID: ***@***.***>