V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
hikerpig
V2EX  ›  分享创造

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

  •  1
     
  •   hikerpig · 2022-02-07 18:20:29 +08:00 · 1711 次点击
    这是一个创建于 781 天前的主题,其中的信息可能已经有所发展或是发生改变。

    写了个 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
    10 条回复    2022-02-08 19:52:02 +08:00
    hackpro
        1
    hackpro  
       2022-02-08 01:20:32 +08:00 via iPhone
    很棒👍
    nielinjie
        2
    nielinjie  
       2022-02-08 09:22:32 +08:00
    但跟 Mermaid.js 的区别是啥?
    hikerpig
        3
    hikerpig  
    OP
       2022-02-08 10:29:08 +08:00 via Android
    @nielinjie
    1. 支持 SVG 和 Canvas 输出。Mermaid 只支持 SVG
    2. 安装 Node CLI 不需要无头浏览器( M 需要 puppeteer )。
    3. 设计架构的时候考虑了图形数据的抽象和渲染引擎分开实现,理论上也能支持 ASCII 字符画的输出(个人感觉应该挺好玩,不过不是主流需求,还没做)。M 的话过深地绑定了 d3 直接操作 dom 元素,支持新的渲染端有点难。
    4. 可以开发自己的图表,以插件形式注册进来,不用改动原仓库。

    这个库的想法最早出于我对 Mermaid 开发者体验的牢骚,不过后来越做觉得越有意思。
    3 和 4 都是从开发者角度看的,目前来说是有可能性,但是文档和支持做的不够好,我会逐渐完善。
    1 和 2 是从使用者角度来看的,可能差距真不是很大,还不如我加把劲多实现几种图表。
    lumotian
        4
    lumotian  
       2022-02-08 11:01:31 +08:00
    一直挺好奇这种图是怎么计算布局的,大佬能给个关键词吗,我学习一下
    hikerpig
        5
    hikerpig  
    OP
       2022-02-08 11:21:32 +08:00   ❤️ 1
    @lumotian 时序图抄的 Mermaid 源码,从上到下逐个排布,自己计算的。
    其他的图的话都能抽象成有向图布局,和 M 一样,用的 [dagre]( https://github.com/dagrejs/dagre/wiki),它 wiki 里有用法教程和参考的文献(没有基础的话看得很辛苦,十分钟能走神一百次那种) 。这个库不再更新了,所以我自己 fork 了[一个版本]( https://github.com/hikerpig/dagre-layout) ,主要是边看边学,边改成 ts ,还没有什么功能改动。
    inecho
        6
    inecho  
       2022-02-08 13:30:20 +08:00
    支持,很好
    pluvet
        7
    pluvet  
       2022-02-08 15:50:36 +08:00
    已 star 。有没有考虑过做一个画树的库,目前想画个二叉树或者 B 树插图,发现现有的库都太丑了
    nielinjie
        8
    nielinjie  
       2022-02-08 17:20:51 +08:00
    @hikerpig 非常酷,期待一个可以交互的渲染。比如可以选中、拖动其中的节点。
    hikerpig
        9
    hikerpig  
    OP
       2022-02-08 19:44:03 +08:00
    @pluvet 这个我本人倒是没有什么倾向(画得不多),可以提个 issue ,给一些你觉得不错的参考图,我尝试看看能不能抄一下视觉部分 😅
    hikerpig
        10
    hikerpig  
    OP
       2022-02-08 19:52:02 +08:00
    @nielinjie 这个理论上是可以的,但是性质不太一样(我的原意是从文本生成示意图。在时序图上拖动节点的话,期待的是什么样的交互反馈呢?),而且工作量可能比我现在完成的要大得多。
    我感觉 https://gojs.net/latest/ 的功能很强大,效果也很好,可它是闭源的收费作品,用不动...
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2841 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 33ms · UTC 13:21 · PVG 21:21 · LAX 06:21 · JFK 09:21
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.