@nzoth/markdown-it-mermaid-sse

⚡️ Mermaid 图表语法高亮预览 markdown-it 插件，支持 SSE 流式渲染

前置条件

• Node >= 20.x
• Pnpm 9.x

安装

npm install @nzoth/markdown-it-mermaid-sse

# or

pnpm add @nzoth/markdown-it-mermaid-sse

功能特点

• 支持 Mermaid 图表语法的解析和渲染
• 提供 SSE (Server-Sent Events) 流式渲染能力
• 与 markdown-it 无缝集成
• 支持在 Markdown 内容中动态更新 Mermaid 图表
• 轻量级且高性能

基本使用

普通集成

import MarkdownIt from 'markdown-it'
import { markdownItMermaidPlugin } from '@nzoth/markdown-it-mermaid-sse'

const md = new MarkdownIt()
md.use(markdownItMermaidPlugin)

// 渲染 Markdown
const result = md.render(`
\`\`\`mermaid
graph TD
    A[开始] --> B{判断}
    B -->|条件1| C[处理1]
    B -->|条件2| D[处理2]
    C --> E[结束]
    D --> E
\`\`\`
`)

结合其他插件使用

import MarkdownIt from 'markdown-it'
import markdownItHighlight from 'markdown-it-highlightjs'
import markdownItKatex from '@vscode/markdown-it-katex'
import { 
  markdownItMermaidPlugin, 
  transformMermaid,
  renderMermaidSSE 
} from '@nzoth/markdown-it-mermaid-sse'

// 初始化 markdown-it
const md = new MarkdownIt({
  html: true,
  linkify: true,
  typographer: true
})

// 注册插件
md.use(markdownItHighlight)
  .use(markdownItKatex)
  .use(markdownItMermaidPlugin)

// 处理并渲染 Markdown
export const renderMarkdownText = (content) => {
  // 可以与其他转换流程结合
  const mermaidTransformed = transformMermaid(content)
  return md.render(mermaidTransformed)
}

// 触发流式渲染 Mermaid 图表
export const renderMermaidProcess = (callback = () => {}) => {
  renderMermaidSSE(callback)
}

API 说明

markdownItMermaidPlugin

markdown-it 插件函数，用于注册 Mermaid 语法支持。

md.use(markdownItMermaidPlugin, options)

🌟 相关项目

以下是一些开发者和团队正在使用、参考或受本项目启发的项目：

| 项目名 | 简介 | | ----------------------------------------------------- | --------------------------------------------------------------------------------------------- | | 快速搭建单轮对话 AI 应用 | 一个可二次开发 Chat Bot 单轮对话 Web 端大模型原型模板 |

📢 社区贡献

💡 如果您的项目也在使用或借鉴了本项目，我们诚挚欢迎您：

• 通过提交 Issue 分享您的项目链接
• 提交 Pull Request (PR) 将您的项目添加到列表中

License

MIT License | Copyright © 2020-PRESENT Wisdom