- Live Online Interactive Editor
- CLI
- Real World Examples
- Gantt Chart of my Experience
- Gantt Chart of my GitHub Repos
Excellent Diagrams-as-Code tool with the widest variety of formats and structures that allows it to do things that most other Diagrams-as-Code tools simply can't do.
Best tool for embedded live diagrams in GitHub Markdown (README.md) files -
GitHub natively integrates to support it so that MermaidJS code blocks in GitHub Markdown are automatically rendered.
-
Huge number of diagram types and more being added
-
Flow Chart, Git Commit Log Charts, Gantt diagrams etc.
-
recently added Cloud Architecture
- D2 and Python diagrams are most established for this
- square only but MermaidJS has placement and direction control between icons so you can do layouts and diagram shapes that D2 / Python Diagrams currently can't do due to issues in both frameworks (d2 issue #1285 and python diagrams issue #44)
- almost no native icons, only
cloud,database,disk,internet,server- but support for Iconify.design which has 200,000+ icons and use icones.js.org to use shorter icon names
- but not clear how to use them, see issue #5950
-
Under active development
-
can do icons now, see example by D2 comparison site
-
Live Online Interactive Editor to interactively see the results as you type
-
CLI - mermaid-js/mermaid-cli
-
Cloud Dashboard - free for up to 5 diagrams
-
See these MermaidJS Code files
-
%%as comment prefixes
A fantastic tool to interactively develop and see the changes in real-time.
Comes with a range of sample diagrams to get you started that you can modify interactively to experiment with.
This can compile local .mmd code into svg or png graphs.
npm install -g @mermaid-js/mermaid-climmdc -i input.mmd -o output.svgAlso available in the 
HariSekhon/Diagrams-as-Code
repo:
Prefix Git branches with Jira ticket numbers in Jira's AA-NNN format for GitHub Pull Requests to automatically appear in Jira tickets (see this doc):
%% https://mermaid.js.org/syntax/gitgraph.html#gitgraph-specific-configuration-options
%% https://htmlcolorcodes.com/
%%{ init: {
"logLevel": "debug",
"theme": "dark",
"themeVariables": {
"git0": "#839192",
"git1": "#2874A6",
"gitInv0": "#FFFFFF",
"gitBranchLabel0": "#FFFFFF",
"commitLabelColor": "#FFFFFF"
}
}
}%%
gitGraph
commit
commit id: "branch"
branch AA-NNN-my-feature-branch
checkout AA-NNN-my-feature-branch
commit id: "add code"
commit id: "refine code"
checkout main
merge AA-NNN-my-feature-branch id: "merge PR" type: HIGHLIGHT tag: "2023.15 release"
commit
commit
* Environment Branches may be one of the few exceptions but requires workflow discipline.
See Also: 100+ scripts for Git and the major Git repo providers like GitHub, GitLab, Bitbucket, Azure DevOps in my DevOps-Bash-tools repo.
%% https://mermaid.js.org/syntax/gitgraph.html#gitgraph-specific-configuration-options
%% https://htmlcolorcodes.com/
%%{ init: {
"logLevel": "debug",
"theme": "dark",
"gitGraph": {
"mainBranchName": "master"
},
"themeVariables": {
"git0": "#839192",
"git1": "#C0392B ",
"git2": "#2E86C1",
"gitInv0": "#FFFFFF",
"gitBranchLabel0": "#FFFFFF",
"commitLabelColor": "#FFFFFF"
}
}
}%%
gitGraph
commit id: "commit 1"
commit id: "branch"
branch long-lived-branch
checkout long-lived-branch
commit id: "50 clever commits"
checkout master
commit id: "commit 2"
checkout long-lived-branch
commit id: "too clever"
checkout master
commit id: "commit 3"
checkout long-lived-branch
commit id: "too long"
checkout master
commit id: "commit 4"
checkout long-lived-branch
commit id: "try to merge back"
checkout master
merge long-lived-branch id: "Merge Conflict!!" type: REVERSE
checkout long-lived-branch
commit id: "trying to fix"
commit id: "still trying to fix"
commit id: "struggling to fix"
commit id: "ask Hari for help"
branch fixes-branch-to-send-to-naughty-colleague
checkout fixes-branch-to-send-to-naughty-colleague
commit id: "fix 1"
commit id: "fix 2"
commit id: "fix 3"
commit id: "could have been working on better things!"
checkout long-lived-branch
merge fixes-branch-to-send-to-naughty-colleague id: "merge fixes" type: HIGHLIGHT
commit id: "more commits"
commit id: "because this branch only had 105 commits already"
checkout master
merge long-lived-branch id: "Finallly Merged!" type: HIGHLIGHT
commit id: "Please never do that again"
This should give you some idea of my long evolution having reached the level of lead engineer and architect by the mid-to-late 2000s.
%%{ init: {
"logLevel": "debug",
'theme': 'dark',
'themeVariables': {
'activeTaskBkgColor': '#27ae60',
'activeTaskBorderColor': 'lightgrey',
'critBkgColor': 'blue',
'critBorderColor': 'lightgrey',
'doneTaskBkgColor': 'grey',
'doneTaskBorderColor': 'lightgrey',
'excludeBkgColor': '#eeeeee',
'gridColor': 'lightgrey',
'taskBkgColor': 'black',
'taskBorderColor': 'black',
'taskTextClickableColor': 'white',
'taskTextColor': 'white',
'taskTextDarkColor': 'white',
'taskTextLightColor': 'black',
'taskTextOutsideColor': 'white',
'todayLineColor': 'red'
}
}
}%%
gantt
title Hari Sekhon's Technology Skills & Experience
dateFormat YYYY-MM-DD
20+ years of Skillz to Pay the Billz : 2002-06-01, 2024-12-31
section Operating Systems
Linux : crit, 2002-12-01, 2024-12-31
Windows Active Directory : done, 2003-01-01, 2009-11-10
%%Redhat Linux : active, 2002-12-01, 2024-12-31
%%Debian Linux : active, 2003-01-01, 2024-12-31
%%Gentoo Linux : done, 2004-06-01, 2009-11-10
%%Ubuntu Linux : active, 2006-06-01, 2024-12-31
%%Alpine Linux : done, 2016-01-01, 2024-12-31
Mac : active, 2010-02-01, 2024-12-31
section Coding
Coding : crit, 2002-12-01, 2024-12-31
Bash : active, 2002-12-01, 2024-12-31
Python : active, 2005-11-01, 2024-12-31
APIs : active, 2006-06-01, 2024-12-31
%%VBScript : done, 2005-05-01, 2009-11-01
Perl : active, 2009-11-13, 2024-12-31
Git : active, 2012-06-01, 2024-12-31
%%Ruby : done, 2009-11-13, 2013-01-31
Java : active, 2013-01-13, 2024-12-31
%%Jython : done, 2013-01-13, 2015-12-31
%%JRuby : done, 2013-03-01, 2013-08-31
%%Scala : done, 2014-01-01, 2015-12-31
Golang : active, 2015-06-01, 2024-12-31
Groovy : active, 2016-01-01, 2024-12-31
%%section Build Systems
%%Make : active, 2006-06-01, 2024-12-31
%%Maven : active, 2013-02-01, 2024-12-31
%%SBT : active, 2014-01-01, 2024-12-31
%%Gradle : active, 2014-06-01, 2024-12-31
%%section Version Control Systems
%%Subversion : done, 2005-11-13, 2012-06-01
%%Mercurial : done, 2011-06-01, 2013-06-01
%%Git : active, 2012-06-01, 2024-12-31
%%GitHub : active, 2012-12-31, 2024-12-31
section Networking
Networking : crit, 2004-03-01, 2024-12-31
%%VPNs : active, 2006-06-01, 2024-12-31
%%Cisco - IOS / NX-OS : done, 2004-03-01, 2024-12-31
%%Juniper - Netscreen / SSG / SRX / ScreenOS / JunOS : done, 2007-01-01, 2013-01-18
%%Netgear : done, 2005-01-01, 2012-12-31
section Load Balancers
section Security
Security : crit, 2004-10-01, 2024-12-31
%%Kerberos : active, 2006-06-01, 2024-12-31
%%LDAP : active, 2006-06-01, 2024-12-31
section DevOps
DevOps : crit, 2005-11-11, 2024-12-31
section Data
Data : active, 2005-11-11, 2024-12-31
%%Data Validation : done, 2006-06-01, 2024-12-31
%%Data Science : done, 2013-01-18, 2024-12-31
section Architecture
Architecture : crit, 2005-11-11, 2024-12-31
Web-Scale Architecture : active, 2009-11-01, 2024-12-31
MicroServices : active, 2018-10-01, 2024-12-31
Diagrams-as-Code : active, 2023-04-14, 2024-12-31
section Databases (RDBMS)
Databases (RDBMS) : crit, 2004-01-01, 2024-12-31
SQL : active, 2004-01-01, 2024-12-31
Microsoft SQL Server : done, 2004-01-01, 2005-10-31
Oracle : done, 2005-11-01, 2009-09-10
MySQL : active, 2007-01-01, 2024-12-31
PostgreSQL : active, 2008-01-01, 2024-12-31
section Web & CDNs
Web : crit, 2005-01-01, 2024-12-31
APIs : active, 2006-06-01, 2024-12-31
Load Balancers : active, 2009-07-01, 2024-12-31
%%LVS : done, 2009-01-01, 2009-11-11
%%Foundry - ServerIron XL / 4G : done, 2009-10-13, 2011-11-31
%%F5 BigIP : done, 2010-06-01, 2013-01-18
%%HAProxy : active, 2018-04-01, 2024-12-31
%%Kong : active, 2023-03-01, 2024-12-31
%%Traefik : active, 2023-03-01, 2024-12-31
Web-Scale Architecture : active, 2009-11-01, 2024-12-31
CDNs : active, 2009-12-01, 2024-12-31
%%UlraDNS : done, 2009-11-01, 2012-06-31
%%Cotendo : done, 2012-06-01, 2013-01-13
%%Cloudflare : active, 2020-08-20, 2024-12-31
MicroServices : active, 2018-10-01, 2024-12-31
section Virtualization & Containerization
Virtualization : crit, 2005-01-01, 2024-12-31
%%VMware ESX, ESXi, VirtualBox : done, 2005-01-01, 2017-02-16
%%Vagrant : active, 2013-01-01, 2023-12-31
Containerization : crit, 2014-06-01, 2024-12-31
Docker : active, 2014-06-01, 2024-12-31
Kubernetes : active, 2018-09-01, 2024-12-31
MicroServices : active, 2018-10-01, 2024-12-31
ArgoCD : active, 2021-01-01, 2024-12-31
section IaaC & Configuration Management
Configuration Management :crit, 2006-01-01, 2024-12-31
Puppet Config Mgmt : done, 2008-09-01, 2014-02-18
Ansible : active, 2014-06-01, 2024-12-31
IaaC :crit, 2008-01-01, 2024-12-31
Terraform :active, 2019-09-01, 2024-12-31
%%Terraform Cloud : active, 2021-09-01, 2022-09-31
%%Kickstart : active, 2008-01-01, 2024-12-31
%%Preseed : active, 2009-01-01, 2024-12-31
%%AutoInstall : active, 2023-01-01, 2024-12-31
section CI/CD
CI/CD : crit, 2010-06-01, 2024-12-31
Jenkins : active, 2010-06-01, 2024-12-31
Travis CI : done, 2014-05-01, 2023-05-08
CircleCI : done, 2019-09-01, 2021-12-31
BuildKite : done, 2019-09-01, 2021-12-31
GitHub Actions : active, 2019-09-01, 2024-12-31
%%GitLab : active, 2019-09-01, 2022-12-31
%%Azure DevOps : done, 2019-09-01, 2022-12-31
%%Bitbucket : done, 2019-09-01, 2022-12-31
%%Concourse : active, 2019-11-01, 2020-03-20
%%TeamCity : active, 2020-08-20, 2021-02-31
CloudBuild : active, 2020-08-20, 2023-09-30
section Monitoring
Monitoring : crit, 2006-06-01, 2024-12-31
Nagios : active, 2006-06-01, 2019-07-31
OpenTSDB : done, 2016-09-01, 2019-07-31
Grafana : active, 2018-01-01, 2024-12-31
Prometheus : active, 2018-06-01, 2024-12-31
%%Pingdom : done, 2020-08-20, 2023-09-17
%%Datadog : done, 2022-08-20, 2023-09-17
section Big Data
Big Data : crit, 2009-11-13, 2019-07-31
Hadoop : done, 2009-11-13, 2019-07-31
%%HDFS : done, 2009-11-13, 2019-07-31
%%MapReduce : done, 2012-06-01, 2019-07-31
Cloudera / Hortonworks : done, 2012-08-01, 2020-03-20
Hive : done, 2013-01-18, 2019-07-31
HBase : active, 2013-02-01, 2019-07-31
Impala : done, 2013-04-01, 2015-06-30
Spark : active, 2014-01-01, 2019-07-31
Kafka : active, 2014-01-01, 2019-07-31
Apache Drill : active, 2014-06-01, 2018-12-31
section NoSQL
NoSQL : crit, 2009-11-13, 2024-12-31
HBase : active, 2013-02-01, 2019-07-31
%%MongoDB : done, 2013-06-01, 2013-12-31
Cassandra : active, 2013-08-01, 2024-12-31
Couchbase : done, 2013-11-01, 2024-03-01
section Caching
Caching : crit, 2009-11-31, 2024-12-31
Memcached : done, 2009-11-31, 2024-12-31
Redis : active, 2013-03-01, 2024-12-31
section Cloud
Cloud : crit, 2012-09-01, 2024-12-31
AWS : active, 2012-09-01, 2024-12-31
GCP : active, 2018-09-01, 2024-12-31
Azure : active, 2020-08-01, 2024-12-31
section Search
Search : crit, 2013-03-31, 2024-12-31
Elasticsearch : active, 2013-03-31, 2024-12-31
%%LogStash : done, 2013-03-31, 2024-12-31
%%Fluentd : crit, 2018-03-31, 2024-12-31
%%Kibana : crit, 2013-03-31, 2024-12-31
SolrCloud : done, 2013-04-01, 2024-03-01
%%{ init: {
"logLevel": "debug",
'theme': 'dark',
'themeVariables': {
'activeTaskBkgColor': '#0000ff',
'activeTaskBorderColor': 'lightgrey',
'critBorderColor': 'lightgrey',
'doneTaskBkgColor': 'grey',
'doneTaskBorderColor': 'lightgrey',
'taskBkgColor': 'black',
'taskBorderColor': 'black',
'taskTextColor': 'white',
'taskTextDarkColor': 'white',
'taskTextLightColor': 'black',
'todayLineColor': 'red'
}
}
}%%
gantt
dateFormat YYYY-MM-DD
title Repositories Gantt Chart
Nagios-Plugins : active, 2012-12-30, 2020-12-31
lib : active, 2012-12-30, 2015-12-31
Spotify-tools : active, 2012-12-30, 2020-12-31
DevOps-Perl-tools : active, 2012-12-30, 2020-12-31
SQL-keywords : active, 2013-08-13, 2020-12-31
spark-apps : done, 2015-05-25, 2020-04-02
lib-java : active, 2015-05-31, 2016-12-31
pylib : active, 2015-10-27, 2020-12-31
DevOps-Python-tools : active, 2015-10-27, 2020-12-31
Dockerfiles : active, 2016-01-17, 2022-12-31
DevOps-Bash-tools : active, 2016-01-17, 2024-12-31
Nagios-Plugin-Kafka : active, 2016-06-07, 2017-12-31
HAProxy-configs : active, 2018-06-08, 2022-12-31
DevOps-Golang-tools : active, 2020-04-30, 2024-09-22
Spotify-Playlists : active, 2020-06-29, 2024-09-22
SQL-scripts : active, 2020-08-05, 2024-09-21
Kubernetes-configs : active, 2020-09-16, 2024-09-21
Templates : active, 2019-11-25, 2024-09-25
TeamCity-CI : active, 2020-12-03, 2022-12-31
Terraform : active, 2021-01-18, 2024-09-21
Jenkins : active, 2022-01-17, 2024-09-23
GitHub-Actions : active, 2022-01-17, 2024-09-22
CI-CD : active, 2022-03-25, 2023-12-31
GitHub-Actions-Contexts : active, 2022-08-17, 2022-12-31
Diagrams-as-Code : active, 2023-04-14, 2024-10-02
Template-Repo : active, 2023-04-15, 2024-09-22
Packer : active, 2023-06-02, 2024-09-21
Vagrant-templates : active, 2023-06-12, 2024-09-21
Knowledge-Base : active, 2023-11-22, 2024-09-29
HariSekhon : active, 2024-08-14, 2024-10-02
GitHub-Commit-Times-Graph : active, 2024-09-07, 2024-09-08
GitHub-Repos-MermaidJS-Gantt-Chart : active, 2024-10-02, 2024-10-03