服务部署图绘制--Mermaid

官网: https://mermaid.js.org/syntax/flowchart.html

例子: https://blog.csdn.net/weixin_55508765/article/details/125735923

npm install mermaid

<template>
  <div class="test-container">
    <h1>输入编辑流程图</h1>
    <div class="editor-container">
      <!-- 编辑器 -->
      <textarea cols="40" rows="10" v-model="value" @input="handleInput">
      </textarea>
    </div>
    <!-- 流程图 -->
    <div class="mermaid"></div>
  </div>
</template>
 
<script>
//导入样式及编辑器
 
//导入流程图
import mermaid from "mermaid";
mermaid.mermaidAPI.initialize({ startOnLoad: false });
export default {
  components: {},
  data() {
    return {
      value: "",
    };
  },
  methods: {
    handleInput() {
// 输入测试！
// graph TB;
// id1(开始)-->id2;
// 准备开始过程-...->id1(开始)
// linkStyle 1 stroke:#f40,stroke-width:6px;
// style id1 fill:#f30,stroke:#f,stroke-width:14px;
// id2-.->id4;
// style id2 fill:#ccf,stroke:#f66,stroke-width:5px,stroke-dasharray: 5, 5;
// id4[(分支1)]-..->完成
// id2-.开始学习.->id5;
// id5{分支2}-->id11((学习结束));
// id2==>id6[分支3];
// id2== 黑粗线连接 ==>id7["(分支4)"];
// id2((提交))-->id8[分支5];
// id8[分支5]-->id9[5下面的流程1];
// id9[5下面的流程1]-->id10[分配任务];
      const testDom = document.querySelector(".mermaid");
      this.handler(this.value, testDom);
    },
    handler(val, element) {
      const insertSvg = (svgCode) => {
        element.innerHTML = svgCode;
      };
      mermaid.mermaidAPI.render(
        "mermaid",
        val,
        insertSvg
      );
    },
  },
  mounted() {},
};
</script>
 
<style lang="less">
.test-container {
  padding: 0 30px;
  text-align: center;
  .editor-container {
    text-align: left;
    padding: 30px;
    width: 500px;
    margin: 20px auto;
    textarea {
      border: 1px solid rgb(158, 96, 96);
      outline: none;
      padding: 20px;
      box-sizing: border-box;
      font-size: 22px;
    }
  }
  .mermaid {
    height: auto;
    width: 500px;
    margin: 20px auto;
    padding: 30px;
    border: 1px solid #ccc;
  }
}
</style>