DEV Community

Vincent Villaluna
Vincent Villaluna

Posted on • Updated on

Github README with diagram using mermaid

Want to add diagrams in your github .md files to tell the flow of your system or the flow of each component talking to each other ? Today I just found something useful worth to share and lets just dive in with this simple example.

Flowchart

    ```

mermaid
        flowchart TD;

        A[Process] --> B{Condition?};
        B -- Yes --> C[Another Process];
        B -- No --> D[Exit Process];
        C ----> E{Another Condition?};
        E -- Yes --> F[Etc...];
        E -- No --> G[Etc...];


    ```
Enter fullscreen mode Exit fullscreen mode

Each Letters before nodes represents as their id's so when you call A ----> B means node A will point to node B.

Output:

github

To know more about other use cases their are plenty of examples here Mermaid Documentation
Other sources github-blog

Top comments (0)