时序图 mscgenjs

这里介绍一下最近在工作中用到的一个库 mscgenjs 是 mscgen 的js实现

demo 地址

rick-chou.github.io/one-piece-r…

代码地址

github.com/rick-chou/o…

ps 这里记录一下 vite 打包的一个坑

开发环境正常 打包后报错 require is not defined

加上下面这段配置就好了

  build: {
    commonjsOptions: {
      transformMixedEsModules: true,
    }
  },

博客系列

• React个人博客 初始化

• React个人博客 时序图

• React个人博客 集成 Vue Music Player

• React个人博客 集成 MDX / tailwindcss/typography

背景

需要实现一个可以点击的时序图， 本来项目中使用的是 mermaid

mermaid.js.org/syntax/sequ…

例如以下的语法就可以实现一个时序图 语法简单

而且现在基本上markdown都可以直接解析mermaid语法 渲染成对应对图

sequenceDiagram 
    Alice->>John: Hello John, how are you? 
    John-->>Alice: Great! Alice-)
    John: See you later!

sequenceDiagram Alice->>John: Hello John, how are you? John-->>Alice: Great! Alice-)John: See you later!

但是它对于点击事件这块好像就比较薄弱了 很难绑定事件

譬如 我们想给每一个Node绑定事件 点击Node展示一个Modal这样的需求就很难实现了

这里就引入另外一个库 mscgenjs

mscgen的语法

www.mcternan.me.uk/mscgen/

举个例子

我们可以在这个网站 在线的调试

mscgen.js.org/

我们可以给每一个Node额外传递一个url

譬如

  Client -> WebFE [label="authorizationRequest",url="test"];

那么这个节点就会渲染成一个 link 节点

然后我们通过绑定点击事件 获取到这个url的值就可以了

比如

  const bindEvents = (event: MouseEvent) => {
    // 阻止默认的跳转行为
    event.preventDefault();
    const path = event.composedPath();
    for (const i in path) {
      const link = path[i] as HTMLElement;
      if ('getAttribute' in link && link.getAttribute('xlink:title')) {
        const key = link.getAttribute('xlink:title');
        if (key) {
          // do something 比如 antd 的 Modal
        }

        break;
      }
    }
  };