Vue-Mermaid 流程图组件使用指南

Vue-Mermaid 流程图组件使用指南

【免费下载链接】vue-mermaid flowchart of mermaid with vue component 项目地址: https://gitcode.com/gh_mirrors/vu/vue-mermaid

Vue-Mermaid 是一个基于 Vue.js 和 Mermaid 的流程图组件，专门为 Vue 项目提供强大的图表绘制能力。通过简洁的配置，开发者可以轻松创建各种复杂的流程图、组织结构图等可视化内容。

项目快速启动

环境配置

通过 npm 安装依赖包：

npm install --save vue-mermaid

组件注册

在 Vue 项目中全局注册组件：

import VueMermaid from "vue-mermaid";
Vue.use(VueMermaid);

基础应用示例

简单流程图

<template>
  <vue-mermaid
    :nodes="data"
    type="graph LR"
    @nodeClick="editNode"
  ></vue-mermaid>
</template>

<script>
export default {
  data: function() {
    return {
      data: [
        {
          id: "1",
          text: "A",
          link: "---",
          next: ["2"],
          editable: true,
          style: "fill:#f9f,stroke:#333,stroke-width:4px",
        },
        { id: "2", text: "B", edgeType: "circle", next: ["3"] },
        { id: "3", text: "C", next: ["4", "6"] },
        { id: "4", text: "D", link: "-- This is the text ---", next: ["5"] },
        { id: "5", text: "E" },
        { id: "6", text: "F" }
      ]
    };
  },
  methods: {
    editNode(nodeId) {
      alert(nodeId);
    }
  }
};
</script>

分组流程图

export default {
  data: function() {
    return {
      data: [
        {
          id: "1",
          text: "A",
          link: "---",
          next: ["2"],
          group: "one"
        },
        { id: "2", text: "B", edgeType: "circle", next: ["3"], group: "one" },
        { id: "3", text: "C", next: ["4", "6"], group: "two" },
        {
          id: "4",
          text: "D",
          link: "-- This is the text ---",
          next: ["5"],
          group: "two"
        },
        { id: "5", text: "E", group: "three" },
        { id: "6", text: "F", group: "three", url: "http://www.github.com" }
      ]
    };
  }
};

高级配置功能

连接线样式配置

nodes: [
  {
    id: "1",
    text: "A",
    link: ["-- yes -->", "-- no -->"],
    linkNumber: 1,
    linkStyle: "fill:none,stroke:red,stroke-width:1px;",
    next: ["2", "3"],
    editable: true
  },
  { id: "2", text: "B" },
  { id: "3", text: "C"}
],

主题配置

通过配置对象来自定义图表主题：

<template>
  <vue-mermaid
    type="graph LR"
    :config="config"
  ></vue-mermaid>
</template>

<script>
export default {
  data: function() {
    return {
      config: {
        theme: 'neutral'
      }
    };
  }
};
</script>

边缘类型支持

组件支持多种边缘类型，包括默认类型和自定义样式：

实用场景与最佳实践

系统架构可视化

使用 Vue-Mermaid 绘制项目架构图，清晰展示各个模块之间的依赖关系和数据流向。通过分组功能，可以将相关模块组织在一起，提高可读性。

业务流程说明

在技术文档中嵌入流程图，直观呈现复杂的业务逻辑和操作步骤。支持节点点击事件，可以实现交互式文档体验。

技术文档增强

结合 VuePress 等文档生成器，在技术文档中嵌入动态图表，显著提升文档质量和用户体验。

构建与部署

开发环境构建

# 安装依赖
npm install

# 生产环境构建
npm run build

构建输出

项目支持多种构建格式：

• UMD 格式：dist/vue-mermaid.umd.js
• ES 模块：dist/vue-mermaid.esm.js
• 压缩版本：dist/vue-mermaid.min.js

项目特性总结

Vue-Mermaid 组件提供了以下核心功能：

• 支持多种流程图类型和布局
• 灵活的分组和样式配置
• 丰富的边缘类型支持
• 可自定义的主题配置
• 节点点击事件处理
• 支持 URL 链接功能

通过合理运用这些功能，开发者可以快速构建专业的技术文档和可视化内容，为项目开发提供强有力的支持。

【免费下载链接】vue-mermaid flowchart of mermaid with vue component 项目地址: https://gitcode.com/gh_mirrors/vu/vue-mermaid