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.84k stars 6.66k forks source link

perpendicular connections between parallel flowchart subgraphs #4354

Open goyalyashpal opened 1 year ago

goyalyashpal commented 1 year ago

Discussed in https://github.com/orgs/mermaid-js/discussions/4352

Originally posted by **goyalyashpal** April 27, 2023 I want to make: 1. perpendicular connections between multiple parallel flowchart subgraphs. or say 2. sequence-diagram styled perpendicular connections between flowcharts. or say, 3. flowchart styled node shapes and "inter actor" arrows in sequence-diagrams. * these all are different ways to say the same thing - atleast to me. it's not a multitude of different things and ever increasing demands
* perpendicular lines that is: horizontal lines on `TB` & verticle lines on `LR` I am thinking of something like the following: the black lines is just there to indicate similarity with sequence-diagram
goyalyashpal commented 1 year ago

Here's one more dummy flowchart i created, this clearly shows the need/importance of following to keep things lean and clean:

dummy-flowchart

goyalyashpal commented 1 year ago 
$ pacman -Ss image --color always | grep pikchr
mingw64/mingw-w64-x86_64-mdbook-pikchr 0.1.5-1
    A mdbook preprocessor to render pikchr code blocks as images in your book (mingw-w64)

Pikchr (pronounced "picture") is a PIC-like markup language for diagrams in technical documentation. Pikchr is designed to be embedded in fenced code blocks of Markdown or similar mechanisms of other documentation markup languages. https://pikchr.org/home/doc/trunk/homepage.md

Pikchr markup language seems to be giving much more control with respect to arrow direction, and boxes etc, so meanwhile, if this above mentioned capability is needed urgently, one can look into it.

arrow right 200% "Markdown" "Source"
box rad 10px "Markdown" "Formatter" "(markdown.c)" fit
arrow right 200% "HTML+SVG" "Output"
arrow <-> down 70% from last box.s
box same "Pikchr" "Formatter" "(pikchr.c)" fit

Creates diagrams from textual descriptions! https://kroki.io

Kroki provides a unified API with support for BlockDiag (BlockDiag, SeqDiag, ActDiag, NwDiag, PacketDiag, RackDiag), BPMN, Bytefield, C4 (with PlantUML), D2, DBML, Ditaa, Erd, Excalidraw, GraphViz, Mermaid, Nomnoml, Pikchr, PlantUML, Structurizr, SvgBob, TikZ, UMLet, Vega, Vega-Lite, WaveDrom, WireViz... and more to come!

goyalyashpal commented 9 months ago

this interactive diagram at https://cibuildwheel.readthedocs.io/en/stable/#how-it-works uses similar concept: