js-sequence-diagrams 序列图流程图插件

发布于 2021-11-15 12:45:45 字数 3891 浏览 1676 评论 0

例子

我们转

Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!

进入

要求

您将需要 Snap.svgWeb Font Loader(如果您希望使用自定义字体)、underscore.js(或 lodash)和可选的 jQuery

安装

bower

运行 bower install bramp/js-sequence-diagrams 并包含以下脚本:

<script src="{{ bower directory }}/bower-webfontloader/webfont.js" />
<script src="{{ bower directory }}/snap.svg/dist/snap.svg-min.js" />
<script src="{{ bower directory }}/underscore/underscore-min.js" />
<script src="{{ bower directory }}/js-sequence-diagrams/dist/sequence-diagram-min.js" />

如果您打算使用手绘主题,还需要导入 CSS:

<link href="{{ bower directory }}/js-sequence-diagrams/dist/sequence-diagram-min.css" rel="stylesheet" />

不使用 bower?没问题。只需下载依赖项,然后自己包含它们。如果您打算使用手绘主题,请不要忘记将两个字体文件放在您的 css 文件夹中:/fonts/daniel/danielbd.woff 和 /fonts/daniel/danielbd.woff2

用法

您可以使用 Diagram 类,例如:

<div id="diagram">Diagram will be placed here</div>
<script> 
  var d = Diagram.parse("A->B: Does something");
  var options = {theme: 'simple'};
  d.drawSVG('diagram', options);
</script>

或使用 jQuery 来完成所有工作:

<script src="{{ bower directory }}/jquery/dist/jquery.min.js" />
<div class="diagram">A->B: Message</div>
<script>
  var options = {theme: 'hand'};
  $(".diagram").sequenceDiagram(options);
</script>

有关完整示例,请查看演示站点

选项

var options = {
    // Change the styling of the diagram, typically one of 'simple',
    // 'hand'. New themes can be registered with registerTheme(...).
    theme: string,

    // CSS style to apply to the diagram's svg tag. (Only supported if using snap.svg)
    css_class: string,
};

样式

使用 snap.svg 时,以下 CSS 类应用于 SVG 图:

  • sequence: 适用于主 SVG 标签。
  • title: 应用于图表的标题。
  • actor: 适用于演员。
  • signal: 应用于信号。
  • note: 适用于所有笔记。

然后可以自定义图表,例如:

.signal text {
    fill: #000000;
}
.signal text:hover {
    fill: #aaaaaa
}
.note rect, .note path {
    fill: #ffff00;
}
.title rect, .title path,
.actor rect, .actor path {
    fill: #ffffff
}

Raphael 废弃

这个库的 1.x 版本使用 Raphaël 来绘制图表,但是,Raphaël 有一些限制,并且从 Internet 上消失了。我们决定使用Snap.svg,它是一个纯 SVG 实现,而不是 Raphaël,它除了 SVG 外,还支持 VML(在 Internet Explorer 上)。这种对 VML 的支持使得无法使用一些较新的 SVG 功能。原生 SVG 允许我们使用 CSS 样式、更好的字体支持、动画等等。

为了帮助过渡,2.x 版将同时支持 Raphaël 和 Snap.svg(首选 Snap.svg)。如果您包含 Raphaël 而不是 snap.svg,它将默认使用 Raphaël 作为渲染库。例如:

<script src="{{ bower directory }}/raphael/raphael-min.js"></script>

还有四个过渡主题,'snapSimple'、'snapHand'、'raphaelSimple'、'raphaelHand',它们强制使用 Snap.svg 或 Raphaël。

计划是在未来版本中放弃对 Raphaël 的支持,从而简化库并减小文件大小。

添加字体

Raphael 需要 Cufon 风格的字体。找到你想要的 ttf 或 otf 格式的字体,访问 Cufon的网站并将其处理成一个 javascript 文件。然后确保通过 HTML 包含字体,或者在更改 main.js 后重新编译。到目前为止,仅包含手绘字体 Daniel Bold。

项目地址:https://github.com/bramp/js-sequence-diagrams

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84961 人气
更多

推荐作者

已经忘了多久

文章 0 评论 0

15867725375

文章 0 评论 0

LonelySnow

文章 0 评论 0

走过海棠暮

文章 0 评论 0

轻许诺言

文章 0 评论 0

信馬由缰

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文