Pintora - 使用文字 DSL 创建示意图

[hikerpig]

写了个 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

[hackpro]

很棒👍

[nielinjie]

但跟 Mermaid.js 的区别是啥？

[hikerpig]

@nielinjie
1. 支持 SVG 和 Canvas 输出。Mermaid 只支持 SVG
2. 安装 Node CLI 不需要无头浏览器（ M 需要 puppeteer ）。
3. 设计架构的时候考虑了图形数据的抽象和渲染引擎分开实现，理论上也能支持 ASCII 字符画的输出（个人感觉应该挺好玩，不过不是主流需求，还没做）。M 的话过深地绑定了 d3 直接操作 dom 元素，支持新的渲染端有点难。
4. 可以开发自己的图表，以插件形式注册进来，不用改动原仓库。

这个库的想法最早出于我对 Mermaid 开发者体验的牢骚，不过后来越做觉得越有意思。
3 和 4 都是从开发者角度看的，目前来说是有可能性，但是文档和支持做的不够好，我会逐渐完善。
1 和 2 是从使用者角度来看的，可能差距真不是很大，还不如我加把劲多实现几种图表。

[lumotian]

一直挺好奇这种图是怎么计算布局的，大佬能给个关键词吗，我学习一下

[hikerpig]

@lumotian 时序图抄的 Mermaid 源码，从上到下逐个排布，自己计算的。
其他的图的话都能抽象成有向图布局，和 M 一样，用的 [dagre]( https://github.com/dagrejs/dagre/wiki)，它 wiki 里有用法教程和参考的文献（没有基础的话看得很辛苦，十分钟能走神一百次那种） 。这个库不再更新了，所以我自己 fork 了[一个版本]( https://github.com/hikerpig/dagre-layout) ，主要是边看边学，边改成 ts ，还没有什么功能改动。

[inecho]

支持，很好

[pluvet]

已 star 。有没有考虑过做一个画树的库，目前想画个二叉树或者 B 树插图，发现现有的库都太丑了

[nielinjie]

@hikerpig 非常酷，期待一个可以交互的渲染。比如可以选中、拖动其中的节点。

[hikerpig]

@pluvet 这个我本人倒是没有什么倾向（画得不多），可以提个 issue ，给一些你觉得不错的参考图，我尝试看看能不能抄一下视觉部分 😅

[hikerpig]

@nielinjie 这个理论上是可以的，但是性质不太一样（我的原意是从文本生成示意图。在时序图上拖动节点的话，期待的是什么样的交互反馈呢？），而且工作量可能比我现在完成的要大得多。
我感觉 https://gojs.net/latest/ 的功能很强大，效果也很好，可它是闭源的收费作品，用不动...