简体中文
English 简体中文 繁體中文
Methodox 首页

Dhole

Dhole 是一种以文本编写图表和示意图的小型语言。你在第一行写明要画什么,在后续各行说明它展示的内容;Dhole 会负责布局并将其绘制出来。

flowchart Making tea
Thirsty? [start] -> Boil the kettle -> Tea or coffee?
Tea or coffee? -> Steep the tea: tea
Tea or coffee? -> Brew the coffee: coffee
Steep the tea -> Enjoy [end, good]
Brew the coffee -> Enjoy

上面的文本绘制出的结果:一张流程图,从 Thirsty? 经过 Boil the kettle 到达一个问题 Tea or coffee?,它的两个答案最终在 Enjoy 处汇合

在交互演示中试一试 —— 在浏览器中编写 Dhole,边输入边查看绘制结果。

以文本编写的示意图写起来快、改起来容易 —— 加一行,图中就会为它腾出位置 —— 而且它本身就可以阅读,无论是在文档、消息还是版本历史中。Dhole 通过 Divooka 的绘图框架进行绘制,因此 Dhole 示意图和其他图表并无二致:它可以在节点上预览,可以应用主题,还可以保存为任意分辨率的图片、SVG、PDF 或 PowerPoint 幻灯片。

它能画什么

种类 首个单词 页面
流程图 flowchart 流程图
时序图 sequence 时序图
状态图 state 状态图
类图 class 类图
实体图 entity 实体图
思维导图和组织结构图 mindmap 思维导图
时间线 timeline 时间线
甘特图 gantt 甘特图
饼图、环形图、条形图、折线图、散点图和雷达图 pie, donut, bar, line, xy, radar 图表
象限图 quadrant 象限图
桑基图 sankey 桑基图
表格和看板 table, kanban 表格和看板

阅读顺序

  1. 教程 —— 在 Divooka Compute 中绘制你的第一张示意图,从示例开始,到写出你自己的文本。
  2. 语言 —— 所有种类共通的内容:第一行、设置、名称、标签、特性、颜色、箭头、缩进、在一段文本中编写多张示意图,以及主题。
  3. 上面每个种类各自的页面,列出了它接受的所有词。
  4. 问题 —— 当 Dhole 无法按所写内容读懂文本时会给出什么提示,以及如何修正。
  5. 示例 —— Divooka Compute 附带的 Dhole 示例。
  6. Dhole 与 Mermaid —— 写给熟悉 Mermaid 的人:哪些相同、哪些不同,以及原因。

网页上的 Dhole

  • 交互演示 —— 编写 Dhole,边输入边查看绘制结果,每个种类都提供一个示例作为起点。
  • 在网页上使用 Dhole —— 只需从 CDN 引入一个脚本,即可在任意页面上绘制 Dhole:使用 <dhole-diagram> 元素、一次性绘制所有 dhole 代码块,或通过 JavaScript。它以 MIT 许可证发布在 MethodoxTech/MethodoxDhole 中。

Divooka 中的 Dhole

Plotting 工具箱中有三个节点,由 Data Analytics 工作负载提供:

  • Draw Dhole,位于 Dhole 类别中,接受 Dhole 文本并输出图表,同时在其 Problems 输出上将文本中的每个问题作为一行给出。运行之后选中它,即可在 Properties 中查看图片。
  • Describe Dhole,位于 Dhole 类别中,接受 Dhole 文本并给出一句话,说明它画的是什么 —— A flowchart of 6 steps and 6 arrows. —— 这正是为看不见图片的人所需的文字说明。
  • Write Dhole,位于 Dhole 类别中、Draw Dhole 旁边,把文本保存在节点上。双击它会打开卡片,左侧是文本,右侧是图片,每次修改后稍等片刻即会重新绘制,文本中的任何错误都列在它们下方。

Write Dhole 的卡片:左侧是以文本编写的看板,右侧是绘制结果

Draw Dhole 输出的图表可以用在任何能用图表的地方:传入 Save Chart 写出 PNG、SVG、PDF 或 Office 文档,传入 Set Theme 重新着色,或放进报告中。

代码中的 Dhole

包名为 Divooka.Visualization.Dhole,语言规范位于其旁边的 Dhole Language.md 中。

using Divooka.Visualization.Dhole;

DholeResult result = Dhole.Read(text);       // the figure, every problem, and a sentence of what was drawn
foreach (DholeProblem problem in result.Problems)
    Console.WriteLine(problem);               // Line 3, column 7: 'lots' is not a number. Write a number with a dot for its decimals, such as 12.5.
result.Figure?.SavePng("diagram.png", 192);   // or SaveSvg, SavePdf, SavePptx, ToImage

Figure figure = Dhole.Draw(text);              // throws DholeException only when nothing in the text can be drawn

同样的文本在任何机器上总是得到同样的图片:Dhole 中没有任何部分会读取时钟、区域性设置或随机数。

参考资料