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: 2 months 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 (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-04-01T16:12:39.000Z (10 months ago)
- Last Synced: 2024-08-01T19:52:38.106Z (6 months ago)
- Topics: cheatsheet, mermaid, mermaidjs
- Homepage: https://blog.jakelee.co.uk/using-mermaid-for-diagrams-on-github/
- Size: 73.2 KB
- Stars: 275
- Watchers: 4
- Forks: 38
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
- 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 attributeNamefunctionName(parameter) ReturnType
functionName2(parameter2) ReturnType
}
class Interface {
Int intName
}
ClassName --|> Interface
``````
classDiagram
class ClassName {
String stringName
Long longName
MyDatatype attributeNamefunctionName(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
requirementDiagramrequirement 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
``````
requirementDiagramrequirement 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
```