bytemd-plugin-mermaid

A bytemd plugin for rendering Mermaid diagrams.

Usage

pnpm add bytemd @bytemd/react bytemd-plugin-mermaid

import { Editor } from '@bytemd/react'
import mermaid from 'bytemd-plugin-mermaid'
import { useState } from 'react'
import 'bytemd/dist/index.css'

const plugins = [
  mermaid({
    // More Options: https://mermaid.ai/open-source/config/schema-docs/config.html
    // theme: 'dark',
  }),
]

export default function App() {
  const [value, setValue] = useState('```mermaid\nflowchart TD\nA[Dark mode] --> B[Mermaid]\n```')

  return <Editor value={value} plugins={plugins} onChange={setValue} />
}

Credits

Based on @bytemd/plugin-mermaid ❤️

License

MIT License © Frankie