Collaborative Calculation and Data Science

colby

sagemath

cornellcollege

github

google

depaul

You can now use [MermaidJS](https://mermaid.js.org/), which is a diagramming and charting tool that renders Markdown-inspired text definitions to create diagrams dynamically, anywhere you use Markdown in CoCalc: text between code cells in Jupyter notebooks, whiteboards, slideshows, Markdown files, etc.  Just put the mermaid diagram description in a fenced code block, like this:

````md
```mermaid
block-beta
columns 1
  db(("DB"))
  blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down)
  block:ID
    A
    B["A wide one in the middle"]
    C
  end
  space
  D
  ID --> D
  C --> D
  style B fill:#969,stroke:#333,stroke-width:4px
```
````

and it will get rendered like this:

```mermaid
block-beta
columns 1
  db(("DB"))
  blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down)
  block:ID
    A
    B["A wide one in the middle"]
    C
  end
  space
  D
  ID --> D
  C --> D
  style B fill:#969,stroke:#333,stroke-width:4px
```

Using Mermaid in exactly this way is also fully supported in JupyterLab and on GitHub.   Moreover, if you publish documents on the CoCalc share server, Mermaid also gets rendered properly, e.g., see these examples:

- https://cocalc.com/wstein/dev/mermaid



Product

Resources

Company