这是一个创建于 1024 天前的主题，其中的信息可能已经有所发展或是发生改变。
写了个 Diagram as Text 库 Pintora 。
可运行在浏览器和 Node.js 。
受到 Mermaid.js 和 PlantUML 的启发，帮助用户通过简单直观的语言来定义和绘制示意图。
通过标准化的图形展示，表达复杂的思想结构和意图，一图胜千言。
特性
- 在浏览器端，支持 SVG 和 Canvas 输出
- 在 Node.js 端，支持输出 PNG/JPG 位图和 SVG 文件
- 具有高度的可扩展性，开发者可扩展自己的图表，作为插件接入
目前实现了几种比较基础的图表
- 时序图 Sequence Diagram
- 实体关系图 Entity Relationship Diagram
- 组件图 Component Diagram
- 活动图 Activity Diagram
- 思维导图 Mind Map
| 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  1
@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/ 的功能很强大，效果也很好，可它是闭源的收费作品，用不动... |
Select Language