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 强大的文本化图表功能。通过简单的配置即可创建流程图、序列图、甘特图等多种专业图表，为项目文档和可视化展示提供便捷的解决方案。

快速开始

安装步骤

使用 npm 命令安装组件：

npm install --save vue-mermaid

基础用法

在 Vue 项目中引入并使用组件：

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

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

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>

核心功能详解

节点链接配置

支持多种链接样式配置：

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"}
],

边类型配置

组件支持多种边类型，包括默认、圆形、体育场形、子程序形等：

分组功能

通过 group 属性实现节点分组：

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" }
      ]
    };
  }
};

主题配置

支持通过 config 对象配置主题：

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

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

图表效果

高级功能

自定义样式

支持为节点和链接设置自定义样式：

• 节点样式：通过 style 属性设置
• 链接样式：通过 linkStyle 属性设置
• 支持 CSS 样式语法

事件处理

组件支持节点点击事件：

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

构建配置

项目使用 Rollup 进行构建：

# 安装依赖
npm install

# 生产环境构建
npm run build

应用场景

Vue-Mermaid 组件适用于多种可视化场景：

1. 项目架构图 - 清晰展示复杂项目结构
2. 业务流程映射 - 通过流程图直观展示操作流程
3. 系统交互演示 - 使用序列图说明组件通信机制
4. 技术文档图表 - 在文档中嵌入动态图表

通过使用 Vue-Mermaid 组件，开发者可以快速在 Vue 项目中集成专业的图表功能，提升项目的可视化效果和文档质量。

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