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
72.07k stars 6.54k forks source link

Flexible diagram #5155

Open sushmangupta opened 10 months ago

sushmangupta commented 10 months ago

Proposal

Is it possible to have have more flexible Mermaid flow charts created in mermaid.live ?

Use Cases

Say I tried to recreate a flowchart (as in image1). This Image1 looks more organized and easy to visualise, however the one created in mermaid.live looks very clumsy wherein the connecting lines are overlapping. So I would request for the diagram preview pane to be more interactive for the user to pull the arrows or cards as desired.

Screenshots

image1 image2

Syntax

No response

Implementation

This is a proposal which I'd love to see built into mermaid by the wonderful community.

huynhicode commented 10 months ago

@sushmangupta You can try an Elk diagram.

I didn't fully recreate your diagram, but here is an example:

Something like this:

Screenshot 2023-12-19 at 12 48 40 PM
sushmangupta commented 10 months ago

Thanks for the quick response. This will be helpful.

sushmangupta commented 10 months ago

I still feel the necessity of flexibility to rearrange the elements in the diagrams. It would be good if this is put to reconsideration. For example, I would like to place repository at the beginning instead of "Shopware\B2B\Common\Controller\GridHelper"

huynhicode commented 10 months ago

Thanks for your feedback @sushmangupta! We will note this for consideration in our roadmap.