This page looks best with JavaScript enabled

I Learn How To Build Flowcharts and Signal Diagram's in Mermaid.JS

 ·   ·  ☕ 1 min read

    Mermaid is a language that allows you to define Flowcharts, Signal Diagrams and Gantt Charts and generate them. This makes it extremely easy to generate charts for websites, system designs or other uses for charts. The really cool thing about this tool is its built on top of Javascript so you can run it in anything that can support web content including websites, code editors like Visual Studio Code/Atom and more. Some modifications to the Markdown spec have also made it possible to embed Mermaid into Markdown documents (an example here: http://mdp.tylingsoft.com).

    In this video we’ll build a Flowchart and Signal Diagram using Mermaid to describe the integration of GitHub WebHooks and Data Cube’s other services.

    More about Mermaid.JS here: https://mermaidjs.github.io

    If you’d like to add Mermaid support to Visual Studio Code here are a list of plugins with Mermaid.JS support: https://marketplace.visualstudio.com/search?term=mermaid&target=VSCode&category=All%20categories&sortBy=Relevance

    The one that I tried to use can be found here (it worked on my Mac, IDK why I had issues here): https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid

    Join the World of Zero Discord: https://discord.gg/hU5Kq2u


    Sam Wronski
    WRITTEN BY
    Sam Wronski
    Maker of things, currently helping build cloud things @ Google. World of Zero is a personal project disconnected from my professional work. Lets make something awesome together!