Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/JakeSteam/Mermaid
A collection of cheatsheets for using Mermaid diagrams on GitHub and elsewhere
https://github.com/JakeSteam/Mermaid
cheatsheet mermaid mermaidjs
Last synced: 13 days ago
JSON representation
A collection of cheatsheets for using Mermaid diagrams on GitHub and elsewhere
- Host: GitHub
- URL: https://github.com/JakeSteam/Mermaid
- Owner: JakeSteam
- License: mit
- Created: 2022-02-24T19:58:53.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-01T16:12:39.000Z (3 months ago)
- Last Synced: 2024-04-01T17:31:01.641Z (3 months ago)
- Topics: cheatsheet, mermaid, mermaidjs
- Homepage: https://blog.jakelee.co.uk/using-mermaid-for-diagrams-on-github/
- Size: 73.2 KB
- Stars: 251
- Watchers: 4
- Forks: 34
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Lists
- my-awesome - JakeSteam/Mermaid - A collection of cheatsheets for using Mermaid diagrams on GitHub and elsewhere (Others)
- Awesome - Mermaid - A collection of cheatsheets for using Mermaid diagrams on GitHub and elsewhere (Communication and Collaboration Tools / Version Control, Wiki, Knowledge base)
README
# Mermaid syntax references
A rewrite of [the Mermaid documentation](https://mermaid-js.github.io/mermaid/) as a learning aid and cheatsheet.
ExampleCode
```mermaid
flowchart LR
A[Start] --> B{Should you?}
B -- Yes --> C{{Do it}}
B -- Maybe --> D[(Save for later)]
B -- No --> E[Okay]
```
```
flowchart LR
A[Start] --> B{Should you?}
B -- Yes --> C{{Do it}}
B -- Maybe --> D[(Save for later)]
B -- No --> E[Okay]
```
Flowchart in Mermaid cheatsheet
```mermaid
sequenceDiagram
Alice ->>+ Bob: Here's a message!
Bob ->>- Alice: Hmm, ok, thanks.
```
```
sequenceDiagram
Alice ->>+ Bob: Here's a message!
Bob ->>- Alice: Hmm, ok, thanks.
```
Sequence diagram in Mermaid cheatsheet
```mermaid
classDiagram
class ClassName {
String stringName
Long longName
MyDatatype attributeName
functionName(parameter) ReturnType
functionName2(parameter2) ReturnType
}
class Interface {
Int intName
}
ClassName --|> Interface
```
```
classDiagram
class ClassName {
String stringName
Long longName
MyDatatype attributeName
functionName(parameter) ReturnType
functionName2(parameter2) ReturnType
}
class Interface {
Int intName
}
ClassName --|> Interface
```
Class diagram in Mermaid cheatsheet
```mermaid
stateDiagram-v2
Stationary --> Moving : Begin moving
Moving --> Stationary : Stop moving
```
```
stateDiagram-v2
Stationary --> Moving : Begin moving
Moving --> Stationary : Stop moving
```
State diagram in Mermaid cheatsheet
```mermaid
erDiagram
User {
Int id PK
String username
Int serverId FK
}
Server {
Int id PK
String serverName
}
Server ||--o{ User : has
```
```
erDiagram
User {
Int id PK
String username
Int serverId FK
}
Server {
Int id PK
String serverName
}
Server ||--o{ User : has
```
Entity relationship diagram in Mermaid cheatsheet
```mermaid
journey
title User Journey
section Logging in
Navigate to login: 4: Alice, Bob, Craig
Entering details: 2: Alice, Bob
Pressing button: 5: Alice
```
```
journey
title User Journey
section Logging in
Navigate to login: 4: Alice, Bob, Craig
Entering details: 2: Alice, Bob
Pressing button: 5: Alice
```
User journey diagram in Mermaid cheatsheet
```mermaid
gantt
Dated Milestone: milestone, m1, 2023-01-01, 1d
Relative Milestone: milestone, m2, after m1, 1d
Task 1: a1, 2023-01-01, 1d
Task 2: a2, after a1, 1d
Task 3: a3, 2023-01-01, 36hr
```
```
gantt
Dated Milestone: milestone, m1, 2023-01-01, 1d
Relative Milestone: milestone, m2, after m1, 1d
Task 1: a1, 2023-01-01, 1d
Task 2: a2, after a1, 1d
Task 3: a3, 2023-01-01, 36hr
```
Gantt chart in Mermaid cheatsheet
```mermaid
pie
title Fruits
"Apples" : 50
"Oranges" : 20
"Grapes" : 9.99
"Passionfruits" : 12.5
```
```
pie
title Fruits
"Apples" : 50
"Oranges" : 20
"Grapes" : 9.99
"Passionfruits" : 12.5
```
Pie chart in Mermaid cheatsheet
```mermaid
requirementDiagram
requirement UptimeRequirement {
id: 1
text: Site Uptime
risk: Medium
verifymethod: Analysis
}
element satisfyingElement {
type: MyElement
docref: ABC001
}
element containingElement {
type: MyElement
docref: ABC002
}
satisfyingElement - satisfies -> UptimeRequirement
containingElement - contains -> UptimeRequirement
```
```
requirementDiagram
requirement UptimeRequirement {
id: 1
text: Site Uptime
risk: Medium
verifymethod: Analysis
}
element satisfyingElement {
type: MyElement
docref: ABC001
}
element containingElement {
type: MyElement
docref: ABC002
}
satisfyingElement - satisfies -> UptimeRequirement
containingElement - contains -> UptimeRequirement
```
Requirement diagram in Mermaid cheatsheet
```mermaid
gitGraph:
commit
branch branch2
checkout branch2
commit
checkout main
commit
merge branch2
```
```
gitGraph:
commit
branch branch2
checkout branch2
commit
checkout main
commit
merge branch2
```