当前位置：首页 > VUE

vue实现用例图

2026-01-22 06:05:00VUE

Vue 实现用例图的方法

使用 Vue 实现用例图可以通过多种方式完成，包括使用第三方库、自定义组件或结合其他工具。以下是几种常见的方法：

使用第三方库（如 mermaid-js）

安装 mermaid-js 库，它是一个支持多种图表（包括用例图）的 JavaScript 库。

npm install mermaid

在 Vue 组件中引入并使用 mermaid：

<template>
  <div ref="mermaid" class="mermaid"></div>
</template>

<script>
import mermaid from 'mermaid';

export default {
  mounted() {
    mermaid.initialize({ startOnLoad: true });
    const diagram = `
      useCaseDiagram
        actor User
        User --> (Use Case 1)
        User --> (Use Case 2)
    `;
    mermaid.init(undefined, this.$refs.mermaid);
    this.$refs.mermaid.innerHTML = diagram;
  }
};
</script>

自定义 SVG 组件

通过 Vue 动态生成 SVG 来实现用例图，适合需要高度自定义的场景。

<template>
  <svg width="400" height="300">
    <!-- 角色 -->
    <circle cx="100" cy="50" r="20" fill="lightblue" />
    <text x="100" y="90" text-anchor="middle">User</text>

    <!-- 用例 -->
    <ellipse cx="200" cy="100" rx="60" ry="30" fill="white" stroke="black" />
    <text x="200" y="105" text-anchor="middle">Use Case 1</text>

    <!-- 连线 -->
    <line x1="120" y1="50" x2="140" y2="100" stroke="black" />
  </svg>
</template>

结合 PlantUML 或其他工具

PlantUML 是一个支持用例图的工具，可以通过后端服务渲染图表后在前端展示。

安装 plantuml-encoder 用于编码 PlantUML 文本。
将编码后的文本发送到 PlantUML 服务器生成图片。

<template>
  <img :src="umlImageUrl" alt="Use Case Diagram" />
</template>

<script>
import { encode } from 'plantuml-encoder';

export default {
  data() {
    return {
      umlImageUrl: ''
    };
  },
  mounted() {
    const umlText = `
      @startuml
      actor User
      User --> (Use Case 1)
      User --> (Use Case 2)
      @enduml
    `;
    this.umlImageUrl = `http://www.plantuml.com/plantuml/svg/${encode(umlText)}`;
  }
};
</script>