website/_dogfooding/_pages tests/diagrams.mdx
Those errors should not crash the whole page
badType
participant Alice
participant Bob
sequenceDiagram
badInstruction Alice
participant Bob
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Health check
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!
It is possible to override default config locally with Mermaid text directives such as:
%%{init: { "theme": "forest" } }%%
%%{init: { "theme": "forest" } }%%
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Health check
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!
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B ---->|No| E[End]
flowchart LR
markdown["`This **is** _Markdown_`"]
newLines["`Line1
Line 2
Line 3`"]
markdown --> newLines
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
stateDiagram-v2
[*] --> Active
state Active {
[*] --> NumLockOff
NumLockOff --> NumLockOn : EvNumLockPressed
NumLockOn --> NumLockOff : EvNumLockPressed
--
[*] --> CapsLockOff
CapsLockOff --> CapsLockOn : EvCapsLockPressed
CapsLockOn --> CapsLockOff : EvCapsLockPressed
--
[*] --> ScrollLockOff
ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
}
erDiagram
CAR ||--o{ NAMED-DRIVER : allows
CAR {
string registrationNumber
string make
string model
}
PERSON ||--o{ NAMED-DRIVER : is
PERSON {
string firstName
string lastName
int age
}
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
:::note
If there's too much space above it's due to a Mermaid bug
:::
pie showData
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
requirementDiagram
requirement test_req {
id: 1
text: the test text.
risk: high
verifymethod: test
}
functionalRequirement test_req2 {
id: 1.1
text: the second test text.
risk: low
verifymethod: inspection
}
performanceRequirement test_req3 {
id: 1.2
text: the third test text.
risk: medium
verifymethod: demonstration
}
interfaceRequirement test_req4 {
id: 1.2.1
text: the fourth test text.
risk: medium
verifymethod: analysis
}
physicalRequirement test_req5 {
id: 1.2.2
text: the fifth test text.
risk: medium
verifymethod: analysis
}
designConstraint test_req6 {
id: 1.2.3
text: the sixth test text.
risk: medium
verifymethod: analysis
}
element test_entity {
type: simulation
}
element test_entity2 {
type: word doc
docRef: reqs/test_entity
}
element test_entity3 {
type: "test suite"
docRef: github.com/all_the_tests
}
test_entity - satisfies -> test_req2
test_req - traces -> test_req2
test_req - contains -> test_req3
test_req3 - contains -> test_req4
test_req4 - derives -> test_req5
test_req5 - refines -> test_req6
test_entity3 - verifies -> test_req5
test_req <- copies - test_entity2
%%{init: { 'logLevel': 'debug', 'theme': 'base' } }%%
gitGraph
commit
branch hotfix
checkout hotfix
commit
branch develop
checkout develop
commit id:"ash" tag:"abc"
branch featureB
checkout featureB
commit type:HIGHLIGHT
checkout main
checkout hotfix
commit type:NORMAL
checkout develop
commit type:REVERSE
checkout featureB
commit
checkout main
merge hotfix
checkout featureB
commit
checkout develop
branch featureA
commit
checkout develop
merge hotfix
checkout featureA
commit
checkout featureB
commit
checkout develop
merge featureA
branch release
checkout release
commit
checkout main
commit
checkout release
merge main
checkout develop
merge release
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
<Tabs>
<TabItem value="tab-a">
The following mermaid diagram is shown:
```mermaid
graph LR
a ---> c(10)
b ---> c(10)
```
</TabItem>
<TabItem value="tab-b">
This mermaid diagram is not displayed:
```mermaid
graph LR
d ---> z(42)
e ---> z(42)
```
</TabItem>
</Tabs>
mindmap
root((conda-forge))
(Repos)
(Package building)
[*-feedstock]
[staged-recipes]
[cdt-builds]
[msys2-recipes]
(Maintenance)
[admin-requests]
[repodata-patches]
(Configuration)
[.github]
[.cirun]
[conda-forge-pinning]
[conda-forge-ci-setup]
[docker-images]
[conda-smithy]
(Automations)
[admin-migrations]
[artifact-validation]
[regro/cf-scripts]
[conda-forge-webservices]
[regro/cf-graph-countyfair]
[regro/libcfgraph + regro/libcflib]
[feedstock-outputs]
(Communications)
[conda-forge.github.io]
[blog]
[status]
[by-the-numbers]
[conda-forge-status-monitor]
[feedstocks]
(Bots & apps)
[conda-forge-admin]
[conda-forge-bot]
[conda-forge-coordinator]
[conda-forge-daemon]
[conda-forge-linter]
[conda-forge-manager]
[conda-forge-status]
[regro-cf-autotick-bot]
[conda-forge-curator]
[conda-forge-webservices]
(Delivery)
[anaconda.org]
[ghcr.io]
[quay.io]
(Installers)
Miniforge
Mambaforge
(CI for builds)
Azure Pipelines
Travis CI
cirun.io
(Infra)
Heroku
Github Actions
Circle CI
quadrantChart
title Reach and engagement of campaigns
x-axis Low Reach --> High Reach
y-axis Low Engagement --> High Engagement
quadrant-1 We should expand
quadrant-2 Need to promote
quadrant-3 Re-evaluate
quadrant-4 May be improved
Campaign A: [0.3, 0.6]
Campaign B: [0.45, 0.23]
Campaign C: [0.57, 0.69]
Campaign D: [0.78, 0.34]
Campaign E: [0.40, 0.34]
Campaign F: [0.35, 0.78]
architecture-beta
group api(cloud)[API]
service db(database)[Database] in api
service disk1(disk)[Storage] in api
service disk2(disk)[Storage] in api
service server(server)[Server] in api
db:L -- R:server
disk1:T -- B:server
disk2:T -- B:db
Mermaid provides an ELK layout
This is a "classical" Mermaid diagram, using the default Dagre layout.
erDiagram
COMPANY ||--o{ DEPARTMENT : has
COMPANY ||--o{ PROJECT : undertakes
COMPANY ||--o{ LOCATION : operates_in
COMPANY ||--o{ CLIENT : serves
DEPARTMENT ||--o{ EMPLOYEE : employs
DEPARTMENT ||--o{ PROJECT : manages
DEPARTMENT ||--o{ BUDGET : allocated
EMPLOYEE }o--o{ PROJECT : works_on
EMPLOYEE ||--|| ADDRESS : lives_at
EMPLOYEE }o--o{ SKILL : has
EMPLOYEE ||--o{ DEPENDENT : supports
PROJECT ||--o{ CLIENT : for
PROJECT ||--o{ TASK : contains
This ER diagram should look different, using the ELK layout.
---
config:
layout: elk
---
erDiagram
COMPANY ||--o{ DEPARTMENT : has
COMPANY ||--o{ PROJECT : undertakes
COMPANY ||--o{ LOCATION : operates_in
COMPANY ||--o{ CLIENT : serves
DEPARTMENT ||--o{ EMPLOYEE : employs
DEPARTMENT ||--o{ PROJECT : manages
DEPARTMENT ||--o{ BUDGET : allocated
EMPLOYEE }o--o{ PROJECT : works_on
EMPLOYEE ||--|| ADDRESS : lives_at
EMPLOYEE }o--o{ SKILL : has
EMPLOYEE ||--o{ DEPENDENT : supports
PROJECT ||--o{ CLIENT : for
PROJECT ||--o{ TASK : contains
Mermaid also provides a way of setting config parameters using a directive %%{init:{"layout":"elk"}}%%
%%{init:{"layout":"elk"}}%%
erDiagram
COMPANY ||--o{ DEPARTMENT : has
COMPANY ||--o{ PROJECT : undertakes
COMPANY ||--o{ LOCATION : operates_in
COMPANY ||--o{ CLIENT : serves
DEPARTMENT ||--o{ EMPLOYEE : employs
DEPARTMENT ||--o{ PROJECT : manages
DEPARTMENT ||--o{ BUDGET : allocated
EMPLOYEE }o--o{ PROJECT : works_on
EMPLOYEE ||--|| ADDRESS : lives_at
EMPLOYEE }o--o{ SKILL : has
EMPLOYEE ||--o{ DEPENDENT : supports
PROJECT ||--o{ CLIENT : for
PROJECT ||--o{ TASK : contains