mscgen_js 开源项目教程

最新推荐文章于 2024-11-06 07:36:42 发布

温姬尤Lee

最新推荐文章于 2024-11-06 07:36:42 发布

阅读量402

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00711/article/details/141915524

mscgen_js 开源项目教程

mscgen_jstext => sequence charts项目地址:https://gitcode.com/gh_mirrors/ms/mscgen_js

1、项目介绍

mscgen_js 是一个用于生成和渲染序列图的开源工具。它支持 MscGen 语言及其衍生语言，能够在现代浏览器和 Node.js 环境中运行。mscgen_js 提供了丰富的功能，包括实时渲染、语法高亮、SVG 和 PNG 导出等。

2、项目快速启动

安装

首先，你需要通过 npm 安装 mscgen_js：

npm install mscgenjs-inpage

基本使用

以下是一个简单的示例，展示如何在 HTML 中嵌入 mscgen_js 并生成序列图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mscgen_js 示例</title>
    <script src="node_modules/mscgenjs-inpage/dist/mscgen-inpage.min.js"></script>
</head>
<body>
    <div id="mscgen-container"></div>
    <script>
        mscgen_js.render({
            source: `
                msc {
                    a [label="Entity A", textbgcolor="red", textcolor="white"],
                    b [label="Entity B", textbgcolor="yellow"],
                    c [label="Entity C", textbgcolor="blue", textcolor="yellow"];

                    a->b [label="ab()"],
                    b->c [label="bc(TRUE)"],
                    c=>>c [label="process(1)"],
                    b<<=c [label="callback()", arcskip="1"],
                    --- [label="If more to run", ID="*"],
                    a->a [label="next()"],
                    a=>c [label="ac1()"],
                    b<<c [label="cb(true)", textbgcolor="lime"],
                    b->b [label="stalled()"],
                    a<<b [label="ab() = FALSE", textcolor="red", linecolor="red"],
                    c note c [label="Just a note", linecolor="green"];
                }
            `,
            target: document.getElementById('mscgen-container'),
            type: 'mscgen'
        });
    </script>
</body>
</html>