写了个 Diagram as Text 库 Pintora 。
可运行在浏览器和 Node.js 。
受到 Mermaid.js 和 PlantUML 的启发,帮助用户通过简单直观的语言来定义和绘制示意图。
通过标准化的图形展示,表达复杂的思想结构和意图,一图胜千言。
目前实现了几种比较基础的图表
name | preview |
---|---|
Sequence Diagram | |
Entity Relationship Diagram | |
Component Diagram | |
Activity Diagram | |
Mind Map |
1
hackpro 2022-02-08 01:20:32 +08:00 via iPhone
很棒👍
|
2
nielinjie 2022-02-08 09:22:32 +08:00
但跟 Mermaid.js 的区别是啥?
|
3
hikerpig OP @nielinjie
1. 支持 SVG 和 Canvas 输出。Mermaid 只支持 SVG 2. 安装 Node CLI 不需要无头浏览器( M 需要 puppeteer )。 3. 设计架构的时候考虑了图形数据的抽象和渲染引擎分开实现,理论上也能支持 ASCII 字符画的输出(个人感觉应该挺好玩,不过不是主流需求,还没做)。M 的话过深地绑定了 d3 直接操作 dom 元素,支持新的渲染端有点难。 4. 可以开发自己的图表,以插件形式注册进来,不用改动原仓库。 这个库的想法最早出于我对 Mermaid 开发者体验的牢骚,不过后来越做觉得越有意思。 3 和 4 都是从开发者角度看的,目前来说是有可能性,但是文档和支持做的不够好,我会逐渐完善。 1 和 2 是从使用者角度来看的,可能差距真不是很大,还不如我加把劲多实现几种图表。 |
4
lumotian 2022-02-08 11:01:31 +08:00
一直挺好奇这种图是怎么计算布局的,大佬能给个关键词吗,我学习一下
|
5
hikerpig OP @lumotian 时序图抄的 Mermaid 源码,从上到下逐个排布,自己计算的。
其他的图的话都能抽象成有向图布局,和 M 一样,用的 [dagre]( https://github.com/dagrejs/dagre/wiki),它 wiki 里有用法教程和参考的文献(没有基础的话看得很辛苦,十分钟能走神一百次那种) 。这个库不再更新了,所以我自己 fork 了[一个版本]( https://github.com/hikerpig/dagre-layout) ,主要是边看边学,边改成 ts ,还没有什么功能改动。 |
6
inecho 2022-02-08 13:30:20 +08:00
支持,很好
|
7
pluvet 2022-02-08 15:50:36 +08:00
已 star 。有没有考虑过做一个画树的库,目前想画个二叉树或者 B 树插图,发现现有的库都太丑了
|
9
hikerpig OP @pluvet 这个我本人倒是没有什么倾向(画得不多),可以提个 issue ,给一些你觉得不错的参考图,我尝试看看能不能抄一下视觉部分 😅
|
10
hikerpig OP @nielinjie 这个理论上是可以的,但是性质不太一样(我的原意是从文本生成示意图。在时序图上拖动节点的话,期待的是什么样的交互反馈呢?),而且工作量可能比我现在完成的要大得多。
我感觉 https://gojs.net/latest/ 的功能很强大,效果也很好,可它是闭源的收费作品,用不动... |