Published
Edited
Jun 14, 2022
9 forks
32 stars
Insert cell
Insert cell
Insert cell
Insert cell
steppedMermaid(step, `
sequenceDiagram
autonumber
participant Alice
participant John

%% step %%
Alice->>John: Hello John, how are you?
%% step %%
loop Healthcheck
John->>John: Fight against hypochondria
end
%% step %%
Note right of John: Rational thoughts!

%% step %%
John-->>Alice: Great!
%% step %%
John->>Bob: How about you?
%% step %%
Bob-->>John: Jolly good!
`)
Insert cell
Insert cell
function steppedMermaid(index, markup) {
const steps = markup.split(/\n\s*%% *step *%% *\n/).slice(0, index + 1);
const n = steps.length - 1;
if(n > 0) steps[n] = `rect rgb(0, 255, 0)\n${steps[n]}\nend\n`;
return mermaid`${steps.join('\n')}`;
}
Insert cell
Insert cell
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