图表即代码:以代码化的方式构建新一代图形库 —— Feakin

Posted Phodal

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了图表即代码:以代码化的方式构建新一代图形库 —— Feakin相关的知识,希望对你有一定的参考价值。

图表即代码是将图表以领域特定语言作为载体,围绕于不同的使用场景,转译生成二次产物 —— 如概念图、架构图、软件架构等。

对于造图形库这个库,我的想法由来已久。然而,直到最近,积压的需求越来越多的时候:

  1. 随着,我们在 ArchGuard 中的架构工作台的进一步深入,需要构建一个架构设计线上化的功能。对于 ArchGuard 平台而言,设计线上化并意味着在线设计架构。在初期,我们想提供的是:架构图的线上化呈现,也就是可以通过代码化架构图的方式,诸如于 Mermaid 就可以提供这样的功能。

  2. 与此同时,在半年前,Quake 框架 也卡在这样一个可视化的图形库中。如何可视化知识的连接?建立它们的连接?

  3. 在那上一篇文章《思维图形化:从表象到概念的浮现过程》中,也需要这样的一个工具,作为它们的载体。然而,现有的工具,在版本化这事上做得可毒啊了。

于是,在挖坑之前,我开始思索我要构建的是怎样一个图形库。值得庆幸的是:哪怕不存在上述的三个原因,我也打算造一个轮子。当然,之前的重点可能不是可用,现在必须要提供一个可用的轮子。

图表即代码

作为一个《万物即代码》(https://ascode.ink/)的先行者,对于图表来说,它的可版本化管理依旧是一个痛点。所以,在这个新的工具实现图表即代码,依旧是一个非常有意思的探索点。

图表即代码(Diagram as Code)是一个已经有一定基础的领域,在我与我的同事们一起构建开源应用 Ledge 的时候,我们已经大量地采用了这个思想。稍有不同的是,Ledge 的图表即代码偏向于是数据可视化,而我们即将要构建 Feakin 偏向于是概念/想法的可视化。但是,这并不影响,我们再次定义一下图表即代码。在先前的《文档代码化》 中,我们定义的文档代码化是:

文档代码化,将文档以类代码的领域特定语言的方式编写,并借鉴软件开发的方式(如源码管理、部署)进行管理。它可以借助于特定的工具进行编辑、预览、查看,又或者是通过专属的系统部署到服务器上。面向非技术人员的文档代码化的一种常见架构模式是:编辑-发布-开发分离』,

而对于图表即代码来说,它是可以相似的方式来定义的:

图表即代码是将图表以领域特定语言作为载体,围绕于不同的使用场景,转译生成二次产物 —— 如概念图、架构图、软件架构等。

这个定义从某种意义上是围绕于现有的工具而产生的,诸如于:

  • 可视化架构图。在 Coca 中,我们使用 Graphviz 来生成软件的依赖关系;在 GitHub 网页上,可以使用 Mermaid 来编写 README.md。

  • 生成代码。诸如于 PlantUML,利用工具可以从 UML 到代码骨架生成;如 Structurizr DSL,可以让从 C4 模型生成 PlantUML 图,进而生成代码。

  • 交互的图表。如在 Ledge 中,生成的图形本身是可以调整和交互的。

对于这样的系统,我想大家都知道如何去设计了。或者说,至少在心底是有个印象。

领域特定语言描述

作为代码化的第一要素,它必须是采用 DSL (领域特定语言) 的设计,才能有效地进行代码化。值得注意的是不要畏惧 DSL:采用领域特定语言,并不意味着特别复杂的编译实现,哪怕是 JSON 格式描述,也可以适为一种 DSL。所以,诸如于 Graphviz 中设计的 DOT Language 就非常的简单:

digraph G 
a -> b
b -> c

简单的语法,可以生成非常有用的图形。只在我们需要一些额外的配置时,才需要去翻看对应的文档。而如果我们能提供更多的 samples,那么就能降低查看文档的成本,构建更好的开发体验。

从另外一个层面来说,图形的序列化结果,其实也算得是上一种领域特定语言。诸如于 .excalidraw 的 JSON 形式, .drawio 文件采用的编码后的 mxgraph 的 XML 格式,它们都是图形的一种类型的领域特定语言。

布局计算:算法生成的关系图

对于代码生成图形来说,用过 D3.js 或者是 Echart.js 的小伙伴,对于 Dagre、ForceLayout 等一系列的图形自动布局算法不陌生。在这里就不展开了 —— 主要是我也不是算法专家。

随后,布局的计算依赖于数据 + 模型,对于一个图表既代码的系统来说:

  • 模型,依赖于 DSL 生成的构建的模型。其中大部分是隐式的模型,如上述 DOT 语言中的 a 和 b 是节点,而  是指向关系。

  • 数据,来源于 DSL 又或者是数据源。如 Graphviz 中来源于 DSL 中的代码,而在支持 import 关系的 DSL 中,则可以通过 DSL 来导入数据。

当然了,如果能提供一个抽象的算法接口,以接入更多的布局算法,那么就可以大大提高系统的灵活性。在这一点上 Cytoscape.js 就做得挺好的,提供了 ELK、CoSE、Cola、fCoSE 等算法的接入,底层的灵活性会带来更多的可扩展空间。

二次转译:支持后续活动

从现实的因素来考虑,并非所有的图表都应该用图表即代码的方式。人们采用图表即代码这种方式,也意味着:基于可视化的结果,进行后续的活动。诸如于:

  • 采用 Structurizr DSL、PlantUML 来呈现系统的设计,会考虑用它来生成模板代码,并在后续对比实现架构与目标架构的差异。

  • 采用 Graphviz 来生成系统依赖关系,用它来展示系统中的循环依赖,再通过自动化地方式检测。

  • ……

也因此,与其说是图形即代码,不如说图形化只是中间的产物,作为沟通时的信息载体。在这点上,它与设计即代码颇为相似,DSL 充当的是图形的标准化输出。

可选的双向绑定:代码 < - > 图形

与上述的内容相比,在代码与图形之间提供双向绑定显得非常有意思。代码化可以向程序员提供高效的输入方式,但是正如新手程序不习惯用 Terminal 一样,他们也需要图形化的方式。于是呢,如何在改变图形的同时,更新代码就变得非常有意思了。从结果上来说,图表工具在保存的时候,存储的是数据模型,而模型便是这个双向绑定的基础。如在使用 draw.io 这样的可视化工具时,当我们添加新的矩形、连接时,结果会更新到对应的数据模型中。

而图形化的编辑呢,存在一些额外的动作(action),如我们在撤销(undo)、重做(redo)的时候,要提供这种模型的重载。这些因素显然会带来一些额外的工作量。

Feakin:面向概念构造系统

于是乎,为了在 ArchGuard 和 Quake 中采用,我便在构思如何去设计这样一个图形工具,名为 Feakin —— 为了注册到 GitHub 的组织里:https://github.com/feakin/ 。随后,为了和 fxxk 做一个区分,Logo 是:f(k)

围绕于如何通过概念来构建系统 —— 即我们如何通过图形来传送想法,是 Feakin 的核心考虑因素。也因此如何支持层次化的思维表达,是 Feakin 的一个重点,也因此,诸如于 Echart.js、Ant G6 等面向数据的图形引擎,并不是 Feakin 的同类型产品。Feakin 的同类型工具是:Drawio、Excalidraw、Graphviz、Mermaid 这一类程序员工具箱里的工具。

Todo —— 图表的抽象模型

起初,在设计 Feakin 的时候,我只想构建一个 Draw.io 的兼容引擎。于是,构建了一个 PoC:https://feakin.github.io/drawio-render-poc/ 。只是呢:

  • Draw.io 的代码是 ES5 时代的核心引擎

  • mxgraph 已经不维护了,一个难以维护的遗留系统

Draw.io 的其中一个可参考的点是 —— 内置了对其它图表库的支持,如 Mermaid、OrgChart 等等。

所以,如何构建一个图表的抽象模型,并提供它们的转换就非常有必要。

Todo —— 图表引擎:Feakin Render

随后,在有了模型之后,我们就需要 Render。当前在 PoC 版本里,我们用的是同事建议的:react-konvas,一个基于 Canvas 的工具库。从功能上来说,它似乎能满足当前的需求。

Demo 地址:https://github.com/feakin/diagram-render

不过呢,我正在慢慢学习不同图表工具的设计,所以进展不是很理想。现在只支持基本的渲染 + 布局接口。

Todo —— 面向扩展编程

当然,还只是想想。

Feakin 总结

啊,说实话,其实就是只有一个想法 + PoC。

其它:只差程序员

对于图形化底层引擎的开发,我算是个新手,如果你也有兴趣,欢迎来加入我们:https://github.com/feakin/ 。

最后,如何划定一个合理的边界,以让 Feakin 不臃肿就是一个值得深思的问题了。

以上是关于图表即代码:以代码化的方式构建新一代图形库 —— Feakin的主要内容,如果未能解决你的问题,请参考以下文章

图表即代码:以代码化的方式构建新一代图形库 —— Feakin

以图形化的方式了解Kubernetes

给开发者提供的 35 款 JavaScript 图形图表库

Android Studio 中的图表/图形

pycharm下载plt库下载不了

以图形方式将对象添加到 Core Data