Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Is it possible to use straight line to link the nodes? #5179

Open
hqgu opened this issue Jan 4, 2024 · 3 comments
Open

Is it possible to use straight line to link the nodes? #5179

hqgu opened this issue Jan 4, 2024 · 3 comments
Labels
Graph: Flow Type: Enhancement New feature or request

Comments

@hqgu
Copy link

hqgu commented Jan 4, 2024

Proposal

I am an academic researcher who uses Mermaid to draw flowcharts for academic journals. However, academic journals require straight lines to connect the nodes, which is not possible with any of the current Mermaid themes. If possible, I would like to see this feature developed. Thank you.

Colors

black lines with a white background would be enough.

Screenshots

Screenshots from some journals:
image
image
image

@hqgu hqgu added Status: Triage Needs to be verified, categorized, etc Type: Enhancement New feature or request labels Jan 4, 2024
@sidharthv96
Copy link
Member

Please try using flowchart-elk, instead of graph or flowchart. It will draw straight lines.

@sidharthv96 sidharthv96 added Graph: Flow and removed Status: Triage Needs to be verified, categorized, etc labels Feb 2, 2024
@shravanngoswamii
Copy link

shravanngoswamii commented Aug 22, 2024

How can I create something exactly like this in mermaid, I did try flowchart-elk, but still I am not able to get straight lines to link nodes and also is there any way to get oval shape??

Also, I want the labels on node links outside the lines!

transformations-getindex-without-dist dot

@kiranbhadani
Copy link

kiranbhadani commented Nov 12, 2024

I am trying to generate flow chart with elk for straight lines, it does not work with v11.4.0, any idea how to fix?

<script type="module">
     import mermaid from "https://cdn.jsdelivr.net/npm/[email protected]/+esm";
     import elkLayouts from 'https://cdn.jsdelivr.net/npm/@mermaid-js/[email protected]/+esm';

     mermaid.registerLayoutLoaders(elkLayouts);
 
     mermaid.initialize({
       theme: 'neutral',
   	layout: 'elk',
   	config:{layout: 'elk'},
   	flowchart:{defaultRenderer: 'elk'},
       logLevel: 3,
       securityLevel: 'loose',
       block: {
         padding: 10,
       },
     });
   </script>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Graph: Flow Type: Enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

4 participants