Markdown 转 Flowchart

一个将 Markdown 中包含的 Mermaid 语法转换为浏览器中的交互式流程图的 JavaScript 库。

特性

• 将包含 Mermaid 流程图的 Markdown 转换为可视化的流程图。
• 提供下载、缩放以及居中流程图等交互功能。
• 支持通过 CDN 和 npm 安装。

入门指南

安装

使用 npm

如果你使用的是现代 JavaScript 模块打包器如 Webpack 或 Rollup，可以通过 npm 安装：

npm install markdown-to-flowchart

使用 CDN

对于简单的脚本或者没有使用模块打包器的项目，可以直接从 CDN 引入库：

<!-- 引入 MarkdownToFlowchart 库 -->
<script src="https://your-cdn-url-here/dist/markdownToFlowchart.umd.js"></script>

使用方法

基本示例

在 HTML 中引入库，并在脚本中初始化 MarkdownToFlowchart 实例：

<!-- 你的 HTML 结构在这里 -->

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const markdownContent = `
      # 示例文档
      这是一个示例文档，其中包含了流程图：
      \`\`\`mermaid
      graph TD
          A[开始] --> B[步骤1]
          B --> C{条件?}
          C -->|是| D[步骤2]
          C -->|否| E[结束]
      \`\`\`
    `;
    let MarkdownToFlowchartInstance = new MarkdownToFlowchart(
      markdownContent,
      'markdown-content',
      () => {
        console.log('渲染完成');
        setTimeout(() => {
          // MarkdownToFlowchartInstance.updateRender(markdownContent2)
        }, 5000);
      }
    );
    // 为按钮添加事件监听器
    document.getElementById('download-btn').addEventListener('click', () => {
      MarkdownToFlowchartInstance.downloadImage();
    });
    document.getElementById('zoom-in-btn').addEventListener('click', () => {
      MarkdownToFlowchartInstance.zoomIn();
    });
    document.getElementById('zoom-out-btn').addEventListener('click', () => {
      MarkdownToFlowchartInstance.zoomOut();
    });
    document.getElementById('center-btn').addEventListener('click', () => {
      MarkdownToFlowchartInstance.centerElement();
    });
  });
</script>

API 参考

构造函数

new MarkdownToFlowchart(markdownContent, containerId, callback)

• markdownContent: 包含 Mermaid 流程图的 Markdown 字符串。
• containerId: 渲染内容将被放置的 DOM 元素的 ID。
• callback: 可选的回调函数，在渲染完成后被调用。

方法

• downloadImage(): 下载当前流程图为图片。
• zoomIn(): 增加流程图的缩放比例。
• zoomOut(): 减少流程图的缩放比例。
• centerElement(): 在容器内居中流程图。

贡献

欢迎贡献！如果发现任何问题或者有新特性请求，请提交 Pull Request 或者打开 Issue。

许可证

此项目采用 MIT 许可证 - 详情请参见 LICENSE 文件。