The avatar for @matthewkenny
Matt Kenny
Published
Edited
Jan 29, 2021
5 forks
Importers
23 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
mermaidJs = require('mermaid@8.9/dist/mermaid.min.js');
Insert cell
Insert cell
viewof mermaidContainer = html`<div id="mermaid" />`
Insert cell
Insert cell
mermaid = function (...values) {
const div = (viewof mermaidContainer); //document.getElementById('mermaid');
if (!div) {
throw 'Cannot find div with id "mermaid"';
}
const src = String.raw(...values).trim();
const id = "mmd" + Math.round(Math.random() * 10000);
div.append(html`<div id="${id}" />`);
try {
const result = mermaidJs.render(id, src, undefined);
return svg([result]);
} catch (ex) {
console.error(ex);
throw ex;
}
}
Insert cell
Insert cell
Insert cell
mermaid`
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
`
Insert cell
Insert cell
mermaid`
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 <br/>prevail!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
`
Insert cell
Insert cell
mermaid`
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
`
Insert cell
Insert cell
mermaid`
stateDiagram-v2
[*] --> Still
Still --> [*]

Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
`
Insert cell
Insert cell
mermaid`
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
`
Insert cell
Insert cell
mermaid`
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
`
Insert cell
Insert cell
mermaid`
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
`
Insert cell
Insert cell
mermaid`
pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 15
`
Insert cell
Insert cell
mermaid`
gitGraph:
options
{
"nodeSpacing": 150,
"nodeRadius": 10
}
end
commit
branch newbranch
checkout newbranch
commit
commit
checkout master
commit
commit
merge newbranch
`
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more