https://github.com/defensestation/blocknote-mermaid
Blocknote plugin for mermaid
https://github.com/defensestation/blocknote-mermaid
blocknote mermaid mermaid-diagrams mermaidjs
Last synced: about 1 month ago
JSON representation
Blocknote plugin for mermaid
- Host: GitHub
- URL: https://github.com/defensestation/blocknote-mermaid
- Owner: defensestation
- License: apache-2.0
- Created: 2024-04-17T22:50:12.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-16T20:58:23.000Z (over 1 year ago)
- Last Synced: 2025-09-23T23:35:55.451Z (5 months ago)
- Topics: blocknote, mermaid, mermaid-diagrams, mermaidjs
- Language: TypeScript
- Homepage:
- Size: 6.92 MB
- Stars: 6
- Watchers: 0
- Forks: 1
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Contributing: contributing.md
- License: LICENSE
- Code of conduct: code_of_conduct.md
Awesome Lists containing this project
README
# Mermaid for Blocknote
Mermaid feature for [Blocknote](https://www.blocknotejs.org/).
## Demo
[A demo is worth a thousand words](https://codesandbox.io/p/devbox/blocknote-mermaid-rvvddc?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clv4g4hsv00062v6dygfbdqi6%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clv4g4hsu00022v6d19eg61e6%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clv4g4hsu00042v6dx5wpc3dh%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clv4g4hsu00052v6ddeo7l7gv%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clv4g4hsu00022v6d19eg61e6%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clv4g4hsu00012v6dxpe35813%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fpackage.json%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522clv4g4hsu00022v6d19eg61e6%2522%252C%2522activeTabId%2522%253A%2522clv4g4hsu00012v6dxpe35813%2522%257D%252C%2522clv4g4hsu00052v6ddeo7l7gv%2522%253A%257B%2522id%2522%253A%2522clv4g4hsu00052v6ddeo7l7gv%2522%252C%2522activeTabId%2522%253A%2522clv4g4yfx006m2v6dys4liyhz%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522TASK_PORT%2522%252C%2522taskId%2522%253A%2522Development%2522%252C%2522port%2522%253A5173%252C%2522id%2522%253A%2522clv4g4yfx006m2v6dys4liyhz%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522path%2522%253A%2522%252F%2522%257D%255D%257D%252C%2522clv4g4hsu00042v6dx5wpc3dh%2522%253A%257B%2522id%2522%253A%2522clv4g4hsu00042v6dx5wpc3dh%2522%252C%2522activeTabId%2522%253A%2522clv4g4vis005i2v6dlh9dpd8e%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clv4g4hsu00032v6d8a3t4hne%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TERMINAL%2522%252C%2522shellId%2522%253A%2522clv4g4jeq000idaf86r024r97%2522%257D%252C%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522Development%2522%252C%2522id%2522%253A%2522clv4g4vis005i2v6dlh9dpd8e%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D)
## Installation
### Install via YARN
Get the package
```shell
$ yarn add @defensestation/blocknote-mermaid
```
## Usage
Include module at your application
```javascript
import { MermaidBlock, insertMermaid } from "@defensestation/blocknote-mermaid";
```
Create schema with mermaid block.
```javascript
const schema = BlockNoteSchema.create({
blockSpecs: {
...defaultBlockSpecs,
mermaid: MermaidBlock,
},
});
```
Add slash menu item.
```javascript
filterSuggestionItems(
[...getDefaultReactSlashMenuItems(editor), insertMermaid()],
query
)
}
/>
```
## Roadmap
- [ ] Custom styles
- [ ] Chart viewer in read only mode.