Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Mermaid - How to connect subgraphs in markdown?

I'm using Mermaid in markdown. I can't figure out how to connect subgraphs.

Given the program below, I need to be able to connect one and two with an arrow.

 -  ```mermaid
    graph LR;
      subgraph one
        main---MainMenu
        MainMenu((MainMenu))---Game
        Game---Level
        Game---Player
      end
      subgraph two
        Screen
      end
      one-->two 
    ```

enter image description here

like image 882
GMHDBJD Avatar asked May 12 '18 05:05

GMHDBJD


People also ask

How do you add mermaids to Markdown?

Just FYI, Webstorm Markdown Settings has a one-click "Install" option for Mermaid and also for PlantUML support (Settings => Markdown). After installing it, the Markdown editor shows the rendered diagram in the preview tab (IDEA Markdown editor has a split view of left: Markdown source, right: rendered view).

What is mermaid code?

About Mermaid. Mermaid lets you create diagrams and visualizations using text and code. It is a JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically. If you are familiar with Markdown you should have no problem learning Mermaid's Syntax ...


2 Answers

The beta now allows you to connect subgraphs:

flowchart TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
    one --> two
    three --> two
    two --> c2

https://mermaid-js.github.io/mermaid/#/flowchart?id=beta-flowcharts

like image 147
laktak Avatar answered Sep 25 '22 12:09

laktak


As far as I know, it's only possible to connect nodes, so you could do:

main-->Screen
like image 41
samuelsov Avatar answered Sep 23 '22 12:09

samuelsov