https://jojozhuang.github.io/tutorial/mermaid-cheat-sheet/ logo * Algorithm Data Structure Algorithm Algorithm Overview Practice Problem * Programming Dev Environment Java Core Java 8 Java Concurrency Java Advanced Java App Javascript Design Pattern * Architecture Theory and Principle Computer Network Softwares Database and Cache Message Queue Docker DevOps Security * Cloud Cloud Knowledge Amazon AWS Google Cloud * Tutorial Jekyll Wordpress Angular Tutorial Angular App React Tutorial React App Mobile RESTful API Node.js Express.js Online Judge Synology ASP.NET Uncategorized * Project * Favorite * More Article Index Page Index Advanced Search RSS Feed Sitemap About * Production [ ] Search Article Index [ ] * Algorithm * Data Structure 27 + Data Structure - Overview + Data Structure - Linked List + Data Structure - Stack + Data Structure - Queue + Data Structure - Deque + Data Structure - LRU Cache + Data Structure - LFU Cache + Data Structure - Monotonic Queue + Data Structure - Skip List + Data Structure - Tree + Data Structure - Binary Search Tree + Data Structure - Red Black Tree - draft + Data Structure - N-ary Tree + Data Structure - B Tree + Data Structure - B+ Tree + Data Structure - Trie + Data Structure - Segment Tree + Data Structure - Fenwick Tree + Data Structure - HashMap + Data Structure - Heap + Data Structure - Bloom Filter + Data Structure - Graph + Data Structure - Graph Problems + Data Structure - Bipartite Graph + Data Structure - Directed Graph - Draft + Data Structure - Topological Sorting + Data Structure - Minimum Spanning Tree - Draft * Algorithm 21 + Algorithm - Sorting + Algorithm - Bit Manipulation + Algorithm - Binary Search + Algorithm - Two Pointers + Algorithm - Divide and Conquer + Algorithm - BFS and DFS + Algorithm - Combination and Permutation + Algorithm - Union Find + Algorithm - Dynamic Programming + Algorithm - Sequence DP + Algorithm - Two Sequences DP + Algorithm - Matrix DP + Algorithm - Knapsack Problems + Algorithm - Sweep Line + Algorithm - Sqrt Decomposition + Algorithm - Minimax Algorithm - Draft + Algorithm - Map Reduce - Draft + Algorithm - Pre Sum - Draft + Algorithm - Random + Algorithm - Coordinate + Algorithm - Math * Algorithm Overview 8 + Algorithm - Templates + Algorithm - Best Practice + Algorithm - Java Best Practice + Algorithm - Useful Math Knowledge + Algorithm - Template for Subset Problems + Algorithm - Serialize and Deserialize Tree + Algorithm - Chi squared test for randomness + Algorithm - Problem List at LeetCode * Practice Problem 8 + Problem - Custom List + Problem - Word Counter + Problem - Image Cache + Problem - Random ID + Problem - Custom Thread Pool + Problem - Versioned Key-Value Store + Problem - Word Rank + Problem - Number in Base Representation * Programming * Dev Environment 13 + Getting Started with Linux + Getting Started with macOS + Installing VirtualBox and Creating Ubuntu VM + Sharing Files between Host and Guest in VirtualBox + Setting up Java Development Environment on Ubuntu + Setting up Java Development Environment on Mac + Installing and Using Git + Git Configuration + Installing and Using Atom + Installing and Using Visual Studio Code + Installing MySQL and Workbench on Mac + Installing MongoDB on Ubuntu and Mac + Using MongoDB in Shell * Java Core 21 + Java Core - Basic + Java Core - Tricks + Java Core - Formatting + Java Core - Array and List + Java Core - Iterator + Java Core - Enum + Java Core - Scanner + Java Core - Collection + Java Core - ArrayList and LinkedList + Java Core - Stack, Queue and Deque + Java Core - Set + Java Core - Map + Java Core - Comparable vs Comparator + Java Core - Generics + Java Core - Generics Type Erasure + Java Core - Static Block and Initialization Block + Java Core - BitSet + Java Core - Socket + Java Core - IO + Java Core - NIO + Java Core - IO vs NIO * Java 8 10 + Java 8 - Tricks + Java 8 - New Features + Java 8 - Functional programming + Java 8 - Higher Order Functions + Java 8 - Functional Interfaces + Java 8 - Functional Composition + Java 8 - Stream API + Java 8 - Predicate + Java 8 - Lazy Execution with Lambda + Java - Java 11,10,9,8,7 - Draft * Java Concurrency 17 + Java Concurrency - Note + Java Concurrency - Overview + Java Concurrency - MultiThreading + Java Concurrency - wait, notify and notifyAll + Java Concurrency - Thread Pool + Java Concurrency - Callable and Future + Java Concurrency - Fork Join + Java Concurrency - Synchronization + Java Concurrency - Synchronizers + Java Concurrency - Volatile Keyword + Java Concurrency - ThreadLocal + Java Concurrency - Thread Signaling + Java Concurrency - Dead Lock + Java Concurrency - ConcurrentSkipListMap + Java Concurrency - Volatile, Final and Atomics + Java Concurrency - BlockingQueue + Java Concurrency - Reading Files in Parallel * Java Advanced 15 + Java Advanced - Java Virtual Machine + Java Advanced - JIT Compiler + Java Advanced - Garbage Collection + Java Advanced - Java Memory Model + Java Advanced - JVM Parameters + Java Advanced - ClassNotFoundException vs. NoClassDefFoundError + Java Advanced - Hashmap vs WeakHashMap + Java Advanced - Abstract Class Vs Interface + Java Advanced - Object Class - Draft + Java Advanced - hashCode() in Java - Draft + Java Advanced - Shallow Copy vs Deep Copy + Java Advanced - Cryptography + Java Advanced - Web Service + Java Advanced - Message Queue - Draft + Java Advanced - Process and ProcessBuilder - Draft * Java App 20 + Java - Thread Dumps & Analysis + Building Web Server with Java Socket + Building Web Server with Netty + Checking Which JDK Eclipse is Using + Using Java Debugger + Java Remote Debugging with Eclipse + Remote Debugging JSP Application + Running JUnit Tests in Command Line + Dynamic Tests with JUnit 5 in Eclipse + Dynamic Tests with JUnit 5 in Command Line + Creating MySQL Container with Docker File for Game Store App + Building Website with JSP and MySQL + Building Website with JSP and MongoDB + Creating MongoDB Image with Dockerfile + Data Persistence with JPA & Eclipselink + Data Persistence with Hibernate + Scripting Java With Rhino + Running JavaScript at Server Side with Rhino + Calling Java Class from Javascript + Data Fix with Javascript For Web Application * Javascript 6 + JavaScript - Basic + JavaScript - Modern + JavaScript - ES5 + JavaScript - ES6 + JavaScript - Async Call in Loop[Draft] + JavaScript - Test JavaScript with Mocha(Draft) * Design Pattern 24 + Design Pattern - Overview + Design Pattern - Singleton + Design Pattern - Factory + Design Pattern - Builder + Design Pattern - Prototype + Design Pattern - DTO - Draft + Design Pattern - Adapter + Design Pattern - Bridge + Design Pattern - Composite + Design Pattern - Decorator + Design Pattern - Facade + Design Pattern - Flyweight + Design Pattern - Proxy + Design Pattern - Command + Design Pattern - Interpreter + Design Pattern - Iterator + Design Pattern - Mediator + Design Pattern - Memento + Design Pattern - Null Object + Design Pattern - Observer + Design Pattern - State + Design Pattern - Strategy + Design Pattern - Template Method + Design Pattern - Visitor * Architecture * Theory and Principle 17 + Distributed System - Common Principles + Distributed System - Consensus Protocols + Distributed System - Computer Network + Distributed System - DNS and CDN + Distributed System - RPC and REST + Distributed System - Load Balancing and Reverse Proxy + Distributed System - Caching + Distributed System - Database Scaling + Distributed System - Application layer + Distributed System - Asynchronism + Distributed System - Real World Architectures + Google File System - Draft + Google Map Reduce - Draft + Google BigTable- Draft + Hadoop Architecture - Draft + Redis Architecture - Draft + Node.js event loop architecture - Draft * Computer Network 2 + Networking Terminology, Interfaces, and Protocols + IP Addresses, Subnets, and CIDR Notation * Softwares 53 + Docker - Introduction + Docker - Hypervisor vs Container + Docker - Installation - Draft + Docker - Real World Usage - Draft + Kubernetes - Introduction - Draft + Kubernetes - Installation - Draft + Kubernetes - Real World Usage - Draft + Maven - Introduction + Maven - Nexus and Maven + Maven - Installation - Draft + Maven - Real World Usage + Jenkins - Introduction + Jenkins - Installation - Draft + Jenkins - Real World Usage - Draft + Vagrant - Introduction + Vagrant - Installation - Draft + Vagrant - Real World Usage - Draft + Nginx - Introduction + Nginx - Installation - Draft + Nginx - Real World Usage - Draft + ZooKeeper - Introduction - Draft + ZooKeeper - Installation - Draft + ZooKeeper - Real World Usage - Draft + Redis - Introduction - Draft + Redis - Installation - Draft + Redis - Real World Usage - Draft + Memcached - Introduction - Draft + Memcached - Installation - Draft + Memcached - Real World Usage - Draft + Cassandra - Introduction - Draft + Cassandra - Installation - Draft + Cassandra - Real World Usage - Draft + Influxdb - Introduction - Draft + Influxdb - Installation - Draft + Influxdb - Real World Usage - Draft + Kafka - Introduction - Draft + Kafka - Installation - Draft + Kafka - Real World Usage - Draft + Hadoop - Introduction - Draft + Hadoop - Installation - Draft + Hadoop - Real World Usage - Draft + Spark - Introduction - Draft + Spark - Installation - Draft + Spark - Real World Usage - Draft + Storm - Introduction - Draft + Storm - Installation - Draft + Storm - Real World Usage - Draft + Splunk - Introduction - Draft + Splunk - Installation - Draft + Splunk - Real World Usage - Draft + Elasticsearch - Introduction - Draft + Elasticsearch - Installation - Draft + Elasticsearch - Real World Usage - Draft * Database and Cache 3 + Redis - Tutorial + Redis - Commands Quick Reference + Redis - Using Redis in Java * Message Queue 1 + Kafka * Docker 14 + Installing and Using Docker on Ubuntu + Installing Docker Toolbox and Kitematic on Mac + Using MySQL Container for JSP Application + Creating MySQL Image with Docker File + Backing up MySQL Database Hosted in Docker Container + Serving Static Website With Nginx In Docker + Serving JSP Application With Tomcat In Docker + Enabling Tomcat Debugging in Docker for Eclipse + Creating Tomcat Image with Docker File + Running Multiple Containers with Docker Compose + Creating Docker Machine with More Disk Space + Installing Microsoft SQL Server in Docker + Creating Docker Container with Bash Script[Draft] + Accessing Website Hosted in Docker of VirtualBox from Another Machine * DevOps 6 + Installing Nginx on macOS + Setting Up Reverse Proxy with Nginx for Node Server + Using Nginx as Load Balancer + Installing and Using Splunk on Linux + Installing Spark on Ubuntu + Real Time Visibility with TIGK * Security 4 + Cyber Attacks + How To Store Passwords In a Secure Way? + Securely Implement Remember Me + Prevent Security Vulnerabilities in Web Development * Cloud * Cloud Knowledge 2 + Cloud Services + Deploying Web Applications to Cloud Services * Amazon AWS 31 + AWS-Overview + AWS-Billing Alarm + AWS-S3 Storage + AWS-CloudFront + AWS-Storage Gateway + AWS-EC2-Instance + AWS-EC2-Elastic Block Store + AWS-EC2-CloudWatch + AWS-EC2-Command Line + AWS-EC2-IAM Roles + AWS-EC2-User Data and Metadata + AWS-EC2-Elastic File System + AWS-EC2-Placement Groups + AWS-Database-Overview + AWS-Database-RDS + AWS-Database-Aurora + AWS-Database-DynamoDB + AWS-Database-Redshift + AWS-Database-Elasticache + AWS-Route53 + AWS-VPC-Custom VPC + AWS-VPC-NAT + AWS-VPC-Access Control Lists + AWS-VPC Flow Logs + AWS-VPC-Bastion Hosts, Direct Connect and End Points + AWS-Elastic Load Balancer + AWS-Auto Scaling Groups + AWS-CloudFormation + AWS-Elastic Beanstalk + AWS-Applications + AWS-Amazon Lambda * Google GCP 7 + GCP-Overview-Draft + GCP-Computing and Hosting + GCP-Storage + GCP-Databases + GCP-Networking + GCP-Big Data + GCP-Machine Learning * Frontend * Angular Tutorial 16 + Angular - Getting Started with Angular CLI + Angular - TypeScript + Angular - HTTP and HttpClient - Draft + Angular - Observable and Reactive Programming - Draft + Angular - Zone.js - Draft + Angular - Components + Angular - Components 2 + Angular - Modules + Angular - Directives + Angular - Dependency Injection + Angular - Bootstrap + Angular - Routes and Navigation + Angular - Forms + Angular - Pipes + Angular - Advanced Topics - Draft + Angular - Testing - Draft * Angular App 13 + First Angular App + Building CRUD Application With Angular + Creating Web App and RESTful API with MEAN Stack + Building Web Application with Angular + Deploying Game Store Angular App to Netlify + Continuously Deploy Angular App to GitHub Pages using Travis-CI + Deploying Angular App to Heroku as Static Website + Deploying Angular App to Heroku with Express Server + Continuously Deploy Angular App to Heroku using Travis-CI + Fixing Issue when Deploying App to Heroku via Travis-CI + Building Online Text Compare Tool with Angular + Deploying Text Compare Angular App to Docker + Deploying Text Compare Angular App to Netlify * React Tutorial 3 + Getting Started with React + Basic Knowledge of React + Flux and Redux * React App 21 + Building Web Application with React + Building Web Application with React and Redux + React Router and Client Side Routing + Deploying Game Store React App to Netlify + Deploying Game Store React App to Azure with FTP + Introduction of Course Player + Building Realtime Web Application with WebSocket + Building Realtime Application with SignalR + Building Course Player with SignalR and ASP.NET + Building Course Player with Node.js and Socket.IO + Deploying Socket.IO App to Heroku + Deploying Socket.IO App to Azure + Building Course Player with React and Socket.IO + Deploying React and Socket.IO App to Heroku + Continuously Deploy React and Socket.IO App to Heroku with Travis-CI + Creating Full Stack App with React and Node.js + Building Online Code Editor with React and Express + Building Online Chinese Dictionary with React and Express + Deploying Full Stack React App to Heroku + Continuously Deploy Full Stack React App to Heroku and Netlify with Travis-CI + Continuously Deploy Full Stack React App to Heroku with Travis-CI * Mobile 11 + Mobile App Development + Building iOS App with Xcode + Setting up Android Development Environment on Mac + Building Android App with Android Studio + Setting up .Net Development Environment on Mac + Cross-platform Mobile Apps Development with Xamarin + Building iOS App with Xamarin + Building Android App with Xamarin + Building Course Player with Xamarin + Installing and Using Cordova on macOS + Building Mobile App with React Native - Draft * Backend * RESTful API 11 + Micro Service & RESTful API[Draft] + Creating RESTful API with Dummy Server + Building RESTful API with ASP.NET Core + Testing RESTful API with Postman + Deploying ASP.NET RESTful API to Azure + Creating RESTful Web Services with Spring Boot + Building RESTful API with Spring Boot + Deploying Spring Boot RESTful API to Heroku + Continuously Deploy Spring Boot App to Heroku with Travis-CI + Building RESTful API with Express And MongoDB + Creating RESTful Web Services with Jersey * Node.js 14 + Installing Node.js and NPM + Using Node.js and NPM + Using Yarn to Manage Packages + Security Vulnerability of Dependencies for Node.js App + QPS and Event Loop - draft + Creating Http Server with Node.js + Running C and Java in Node.js + Calling spawn with Arguments[Draft] + Building Socket.IO Application with ExpressJS[Draft] + Hosting Node.js Application in Docker[Draft] + Working with Environment Variables in Node.js[Draft] + Deploying Node.js Application to Amazon EC2 + Building Cross-platform Desktop Apps with Electron + Converting Web App to Desktop App with Electron * Express.js 12 + Getting Started with Express + Middleware + Logging with Morgan + Logging with Winston + Combine Morgan & Winston + Express Routing + Template Engine + Express Security - Draft + Process Manager - Draft + Authenticating Users with Passport - Draft + Using Express to Serve Static Files + Versioning RESTful API - Draft * Personal Website * Jekyll 24 + Setting up Personal Website on GitHub Pages(Draft) + Setting up Personal Website on GitLab Pages + Setting up Jekyll on Ubuntu and macOS + Setting up Jekyll on Windows 10 + Cannot Start Jekyll at Specific Port + Jekyll - Liquid + Jekyll - Usage and Customization + Jekyll - Google Analytics - Draft + Jekyll - Comments with Disqus + Jekyll - Social Share Buttons + Jekyll - Social Share Buttons with ShareThis + Jekyll - Progress Bar + Jekyll - Pagination + Jekyll - Highlighting + Jekyll - Search Function for Static Website - draft + Jekyll - Math Symbols with MathJax + Jekyll - Diagram with Mermaid + Jekyll - SEO + Jekyll - Performance Optimization + Jekyll - Security + Continuously Deploy Jekyll Website to GitHub Pages with Travis-CI + Deploying Personal Website with Custom Domain + Deploying Jekyll Website to Netlify + Personal Site * Wordpress 1 + Setting up WordPress in Docker * Project * Online Judge 15 + Online Judge - Building Web App with MEAN Stack + Online Judge - Backend RESTful API Server + Online Judge - Frontend with Angular + Online Judge - User Authentication + Online Judge - Remember Me + Online Judge - Export Data + Online Judge - Import Data + Online Judge - Rich Text Editor + Online Judge - Code Editor + Online Judge - Progress Bar + Online Judge - Judging System + Online Judge - Others + Online Judge - Deploying Full Stack Angular App to Heroku + Online Judge - Continuously Deploy MEAN Stack App to Heroku and Netlify with Travis-CI + Online Judge - Deployment with Shell Script - Draft * Others * Synology 6 + Synology Overview + SSH into Synology NAS + Hosting Website on Synology NAS - Draft + Best Way to Back Up Files with Synology NAS + Getting Repositories through GitHub API + Backup GitHub Repositories to Synology NAS * ASP.NET 4 + Deploying ASP.NET MVC Application to IIS + Deploying ASP.NET MVC Application to Azure + Video Is Not Loaded Properly From IIS Localhost + Tricks in ASP.NET MVC * Uncategorized 24 + Cross Domain Access for RESTful Web Services + Installing Jenkins On Ubuntu + Installing Jenkins in Docker + Analyzing Performance Issue with Splunk + Installing Elasticsearch in Ubuntu + Basic Queries in Elasticsearch + Advanced Topics in Elasticsearch + Converting Microsoft Word to Markdown + Common Math Formulas + Hashing Passwords with Bcrypt + Source Code Search with OpenGrok + Unable to Run Perl Script + Upgrading Angular App from 5 to 6 + Migrating Repositories From GitHub to GitLab + Tracking Changes with Blame View on GitHub + MathJax Cheat Sheet for Mathematical Notation + Big O Cheat Sheet + Generating Diagrams and Flowcharts with Mermaid + Creating Data Structure Diagrams with Mermaid + Mermaid Cheat Sheet + Vagrant - Draft + Popular Tools - draft + Migrate from Bootstrap 3 to 4 - Draft + Custom Domain for My Personal Website - Draft * Extra * Advanced Search Beta * GitHub 3 7 1. Tutorial 2. Others 3. Uncategorized 4. Mermaid Cheat Sheet 9724. Mermaid Cheat SheetMermaid * Previous * Next --------------------------------------------------------------------- Cheat Sheet for Mermaid. 1. Flowcharts A flowchart is a type of diagram that represents an algorithm, workflow or process. The flowchart shows the steps as boxes of various kinds, and their order by connecting the boxes with arrows. This diagrammatic representation illustrates a solution model to a given problem. 1.1 Graph Possible directions are: * TB - top bottom * BT - bottom top * RL - right left * LR - left right * TD - same as TB Direction Diagram Definition graph TB; TB graph TB;A-->B; A-->B; graph BT; BT graph BT;A-->B; A-->B; graph RL; RL graph RL;A-->B; A-->B; graph LR; LR graph LR;A-->B; A-->B; TD graph TD;A-->B; graph TD; A-->B; 1.2 Nodes & shapes Feature Diagram Definition Node graph LR; (Default) graph LR;id; id; Node with graph LR;id1 graph LR; Text [This is the id1[This is the text in the box] text in the box] Node with graph LR;id1 graph LR; Round (This is the id1(This is the text in the box) Edges text in the box) Node in graph LR;id1 graph LR; Circle ((This is the id1((This is the text in the circle)) Form text in the circle)) Node in graph LR;id1> graph LR; Asymmetric This is the text id1>This is the text in the box] Shape in the box] Node in graph LR;id1 graph LR; Rhombus {This is the id1{This is the text in the box} Form text in the box} 1.3 Links Between Nodes Feature Diagram Definition Link with Arrow graph LR; Head graph LR;A-->B A-->B graph LR; Open Link graph LR;A---B A---B graph LR;A-- This is graph LR; Text on Links(1) the text ---B A-- This is the text ---B graph LR;A---|This graph LR; Text on Links(2) is the text|B A---|This is the text|B Link with Arrow graph LR; Head and Text(1) graph LR;A-->|text|B A-->|text|B Link with Arrow graph LR;A-- text graph LR; Head and Text(2) -->B A-- text -->B graph LR; Dotted Link graph LR;A-.->B; A-.->B; Dotted Link with graph LR;A-. text graph LR; Text .-> B A-. text .-> B graph LR; Thick Link graph LR;A ==> B A ==> B Thick link with graph LR;A == text = graph LR; text => B A == text ==> B 1.4 Subgraphs Syntax: subgraph title graph definition end Example: graph TB c1-->a2 subgraph one a1-->a2 end subgraph two b1-->b2 end subgraph three c1-->c2 end graph TB c1-->a2 subgraph one a1-->a2 end subgraph two b1-->b2 end subgraph three c1-->c2 end 2. Sequence Diagrams A Sequence diagram is an interaction diagram that shows how processes operate with one another and in what order. 2.1 Participants The participants or actors are rendered in order of appearance in the diagram source text. sequenceDiagram participant Alice participant John Alice->>John: Hello John, how are you? John-->>Alice: Great! sequenceDiagram participant Alice participant John Alice->>John: Hello John, how are you? John-->>Alice: Great! You can specify the actor's order of appearance to show the participants in a different order. sequenceDiagram participant John participant Alice Alice->>John: Hello John, how are you? John-->>Alice: Great! sequenceDiagram participant John participant Alice Alice->>John: Hello John, how are you? John-->>Alice: Great! The participants can be defined implicitly without specifying them with the participant keyword. sequenceDiagram Alice->>John: Hello John, how are you? John-->>Alice: Great! sequenceDiagram Alice->>John: Hello John, how are you? John-->>Alice: Great! 2.2 Aliases The participant can have a convenient identifier and a descriptive label. sequenceDiagram participant A as Alice participant J as John A->>J: Hello John, how are you? J-->>A: Great! sequenceDiagram participant A as Alice participant J as John A->>J: Hello John, how are you? J-->>A: Great! 2.3 Messages Messages can be of two displayed either solid or with a dotted line. [Actor][Arrow][Actor]:Message text There are six types of arrows currently supported: Arrow Type Description -> Solid line without arrow -> Dotted line without arrow ->> Solid line with arrowhead ->> Dotted line with arrowhead -x Solid line with a cross at the end (async) -x Dotted line with a cross at the end (async) 2.4 Activations Activate and deactivate an actor. sequenceDiagram Alice->>John: Hello John, how are you? activate John John-->>Alice: Great! deactivate John sequenceDiagram Alice->>John: Hello John, how are you? activate John John-->>Alice: Great! deactivate John Shortcut notation by appending +/- suffix to the message arrow. sequenceDiagram Alice->>+John: Hello John, how are you? John-->>-Alice: Great! sequenceDiagram Alice->>+John: Hello John, how are you? John-->> -Alice: Great! Activations can be stacked for same actor: sequenceDiagram Alice->>+John: Hello John, how are you? Alice->>+John: John, can you hear me? John-->>-Alice: Hi Alice, I can hear you! John-->>-Alice: I feel great! sequenceDiagram Alice->>+John: Hello John, how are you? Alice->> +John: John, can you hear me? John-->>-Alice: Hi Alice, I can hear you! John-->>-Alice: I feel great! 2.5 Notes Add notes to a sequence diagram by the notation Note. Note [ right of | left of | over ] [Actor]: Text in note content 1) Right Side sequenceDiagram participant John Note right of John: Text in note sequenceDiagram participant John Note right of John: Text in note 2) Left Side sequenceDiagram participant John Note left of John: Text in note sequenceDiagram participant John Note left of John: Text in note 3) Over sequenceDiagram participant John Note over John: Text in note sequenceDiagram participant John Note over John: Text in note 4) Create notes spanning two participants sequenceDiagram Alice->>John: Hello John, how are you? Note over Alice,John: A typical interaction sequenceDiagram Alice->>John: Hello John, how are you? Note over Alice,John: A typical interaction 2.6 Loops Express loops in a sequence diagram by the notation loop. loop Loop text ... statements ... end sequenceDiagram Alice->John: Hello John, how are you? loop Every minute John-->Alice: Great! end sequenceDiagram Alice->John: Hello John, how are you? loop Every minute John-->Alice: Great! end 2.7 Alt Express alternative paths in a sequence diagram by the notation alt. alt Describing text ... statements ... else ... statements ... end Or, if there is sequence that is optional (if without else). opt Describing text ... statements ... end Example: sequenceDiagram Alice->>John: Hello John, how are you? alt is sick John->>Alice: Not so good :( else is well John->>Alice: Feeling fresh like a daisy end opt Extra response John->>Alice: Thanks for asking end sequenceDiagram Alice->>John: Hello John, how are you? alt is sick John->>Alice: Not so good :( else is well John->>Alice: Feeling fresh like a daisy end opt Extra response John->>Alice: Thanks for asking end 3. Gant Diagrams A Gantt chart is a type of bar chart, first developed by Karol Adamiecki in 1896, and independently by Henry Gantt in the 1910s, that illustrates a project schedule. Gantt charts illustrate the start and finish dates of the terminal elements and summary elements of a project. gantt title A Gantt Diagram dateFormat YYYY-MM-DD section Section First Task :a1, 2018-07-01, 30d Another Task :after a1, 20d section Another Second Task :2018-07-12, 12d Third Task : 24d gantt title A Gantt Diagram dateFormat YYYY-MM-DD section Section First Task :a1, 2018-07-01, 30d Another Task :after a1, 20d section Another Second Task :2018-07-12, 12d Third Task : 24d gantt dateFormat YYYY-MM-DD title Adding GANTT diagram functionality to mermaid section A section Completed task :done, des1, 2018-01-06,2018-01-08 Active task :active, des2, 2018-01-09, 3d Future task : des3, after des2, 5d Future task2 : des4, after des3, 5d section Critical tasks Completed task in the critical line :crit, done, 2018-01-06,24h Implement parser and jison :crit, done, after des1, 2d Create tests for parser :crit, active, 3d Future task in critical line :crit, 5d Create tests for renderer :2d Add to mermaid :1d section Documentation Describe gantt syntax :active, a1, after des1, 3d Add gantt diagram to demo page :after a1 , 20h Add another diagram to demo page :doc1, after a1 , 48h section Last section Describe gantt syntax :after doc1, 3d Add gantt diagram to demo page :20h Add another diagram to demo page :48h gantt dateFormat YYYY-MM-DD title Adding GANTT diagram functionality to mermaid section A section Completed task :done, des1, 2018-01-06,2018-01-08 Active task :active, des2, 2018-01-09, 3d Future task : des3, after des2, 5d Future task2 : des4, after des3, 5d section Critical tasks Completed task in the critical line :crit, done, 2018-01-06,24h Implement parser and jison :crit, done, after des1, 2d Create tests for parser :crit, active, 3d Future task in critical line :crit, 5d Create tests for renderer :2d Add to mermaid :1d section Documentation Describe gantt syntax :active, a1, after des1, 3d Add gantt diagram to demo page :after a1 , 20h Add another diagram to demo page :doc1, after a1 , 48h section Last section Describe gantt syntax :after doc1, 3d Add gantt diagram to demo page :20h Add another diagram to demo page :48h 4. Demos 4.1 Basic Flowchart graph LR A[Square Rect] -- Link text --> B((Circle)) A --> C(Round Rect) B --> D{Rhombus} C --> D graph LR A[Square Rect] -- Link text --> B((Circle)) A --> C(Round Rect) B --> D{Rhombus} C --> D 4.2 Flowchart with Decision graph TD A[Christmas] -->|Get money| B(Go shopping) B --> C{Let me think} C -->|One| D[Laptop] C -->|Two| E[iPhone] C -->|Three| F[fa:fa-car Car] graph TD A[Christmas] -->|Get money| B(Go shopping) B --> C{Let me think} C -->|One| D[Laptop] C -->|Two| E[iPhone] C -->|Three| F [fa:fa-car Car] 4.3 Larger Flowchart with Some Styling graph TB sq[Square shape] --> ci((Circle shape)) subgraph A od>Odd shape]-- Two line
edge comment --> ro di{Diamond with
line break} -.-> ro(Rounded
square
shape) di==>ro2(Rounded square shape) end %% Notice that no text in shape are added here instead that is appended further down e --> od3>Really long text with linebreak
in an Odd shape] %% Comments after double percent signs e((Inner / circle
and some odd
special characters)) --> f(,.?!+-*z) cyr[Cyrillic]-->cyr2((Circle shape Nachalo)); classDef green fill:#9f6,stroke:#333,stroke-width:2px classDef orange fill:#f96,stroke:#333,stroke-width:4px class sq,e green class di orange graph TB sq[Square shape] --> ci((Circle shape)) subgraph A od>Odd shape]-- Two line edge comment --> ro di{Diamond with line break} -.-> ro(Rounded square shape) di==>ro2(Rounded square shape) end %% Notice that no text in shape are added here instead that is appended further down e --> od3> Really long text with linebreak in an Odd shape] %% Comments after double percent signs e((Inner / circle and some odd special characters)) --> f(,.?!+-\*z) cyr[Cyrillic]-->cyr2((Circle shape Nachalo)); classDef green fill:#9f6,stroke:#333,stroke-width:2px classDef orange fill:#f96,stroke:#333,stroke-width:4px class sq,e green class di orange 4.4 Basic Sequence Diagram sequenceDiagram Alice ->> Bob: Hello Bob, how are you? Bob-->>John: How about you John? Bob--x Alice: I am good thanks! Bob-x John: I am good thanks! Note right of John: Bob thinks a long
long time, so long
that the text does
not fit on a row. Bob-->Alice: Checking with John... Alice->John: Yes... John, how are you? sequenceDiagram Alice ->> Bob: Hello Bob, how are you? Bob-->>John: How about you John? Bob--x Alice: I am good thanks! Bob-x John: I am good thanks! Note right of John: Bob thinks a long long time, so long that the text does not fit on a row. Bob-->Alice: Checking with John... Alice->John: Yes... John, how are you? 4.5 Message to Self in Loop sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts
prevail... John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good! sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts prevail... John-->>Alice: Great! John->>Bob: How about you? Bob-->> John: Jolly good! 5. References * Mermaid Flowcharts - Basic Syntax * Mermaid Sequence diagrams * Mermaid Gant diagrams --------------------------------------------------------------------- * Previous * Next Please enable JavaScript to view the comments powered by Disqus. (c) 2021 jojozhuang.github.io, All rights reserved.