<Devtools/>dailyToolsCheatsheetsInterview
ProblemsBlogPricing
Ctrl + K

MermaidJS and Graphviz side by side

Here we'll show side by side markup and rendered view of both Graphviz and MermaidJS.

System design / software architecture diagram

MermaidJSGraphViz
graph TD
  messageClient --> |sendMessage|messageBackend
  messageBackend --> userService
  userService --> userDB[(userDB)]
  messageBackend --> messageDB
  messageQueue>messageQueue]
  messageDB[(messageDB)] -->|change data captrure|messageQueue
  messageQueue --> messageNotifier
  messageNotifier --> pushNotifications{{pushNotifications}}
digraph MessageArchitecture {
  messageClient
  messageQueue[shape=rarrow]
  messageBackend[shape=rectanble]
  messageDB[shape=cylinder]
  userService[shape=rectangle]
  userDB[shape=cylinder]
  pushNotifications[shape=octagon]
  messageNotifier[shape=rectangle]
  
  messageClient -> messageBackend[label=sendMessage]
  messageBackend -> userService
  userService -> userDB
  messageBackend -> messageDB
  messageDB -> messageQueue[label="change data captrure"]
  messageQueue -> messageNotifier
  messageNotifier -> pushNotifications
}

Class diagram/Entity relationship diagram

MermaidJSGraphViz
---
title: ERD
---
classDiagram
  class Organization {
    String url
    int id
  }
  class User {
    String avatar
    String email
  }
  class Repository {
    String name
    int stargazers_count
  }

  Repository --> User: stargazers
  Organization --> Repository: repos
  Organization --> User: members
digraph GitHub {
  graph [
    rankdir = "LR"
  ]

  node [
    shape = record
  ]

  organization[
    label="Organization | { url | string } | {id | int} "
  ]

  user[
    label="User | {avatar|string} | {email|string}"
  ]

  repository[
    label="Repository | {name|string} | {stargazers_count|int}"
  ]

  repository -> user[label=stargazers taillabel=1 headlabel=N dir=both]
  organization -> repository[label=repos taillabel=1 headlabel=N]
  organization -> user[label=members taillabel=1 headlabel=N]
}

Workflow diagram/Flowchart

MermaidJSGraphViz
graph TD
  start((start)) --> lock_booking
  lock_booking --> process_payment
  process_payment --> successful_payment{"success?"}
  successful_payment -->|NO|release_booking
  successful_payment -->|YES|reserve_booking
  reserve_booking --> send_email
  finish(((finish)))
  send_email --> finish
  release_booking --> finish
digraph BookingWorkflow {
  start[shape=circle]
  end[shape=doublecircle]
  lock_booking[shape=rectangle]
  process_payment[shape=rectangle]
  successful_payment[shape=diamond label="success?"]
  reserve_booking[shape=rectangle]
  release_booking[shape=rectangle]

  start -> lock_booking
  lock_booking -> process_payment
  process_payment -> successful_payment
  successful_payment -> release_booking[label=NO]
  successful_payment -> reserve_booking[label=Yes]
  reserve_booking -> send_email
  send_email -> end
  release_booking -> end
}

Mermaid Pros

  • Easy to integrate Javascript libraries.
  • Wide range of diagram types supported
  • More pleasant looking

Graphviz Pros

  • Plugins for most of the IDEs
  • Widely accepted and used in bash/command line use cases
  • Very intuitive syntax with nodes, edges, arrows, and attributes
PrivacyTermsFAQChangelogContact Us © Monkey SkatesHave kids?