在网页上使用 Dhole

Dhole 在网页上的绘制效果与在 Divooka 中相同。它的公开构建是一个没有任何依赖的脚本，以 MIT 许可证发布在 MethodoxTech/MethodoxDhole 中 —— 包括脚本和语言规范 —— 并由 jsDelivr 从那里提供服务。交互演示就是用它绘制的。

它就是同一个 Dhole，而不是仿制品：它移植自 Divooka 自身的 Dhole，并逐个文本与之对照校验。同一段文本会绘制出同样大小的图形，每个文字都位于 Divooka 放置它的位置，使用同样的主题，并以同样的措辞（英文或中文）说明同样的问题。

脚本

<script src="https://cdn.jsdelivr.net/gh/MethodoxTech/MethodoxDhole@0.2/dist/dhole.min.js"></script>

@0.2 会获取最新的 0.2 版本；@0.2.0 则让页面固定使用该版本。

元素中的示意图

该脚本定义了 <dhole-diagram>，它会绘制其中包含的文本：

<dhole-diagram>
pie Where the day goes
Sleep: 8
Work: 8
Family: 4
Reading: 2
Errands: 2
</dhole-diagram>

它在自己的影子根（shadow root）中绘制，因此页面的样式和图片互不干扰；每当其文本发生变化时都会重新绘制。它接受四个属性：

属性	值
`theme`	文本未指定主题时使用的主题：`light`、`dark`、`presentation`、`minimal`、`classic`、`print`、`golden`、`quiet gold`、`silver gold` 或 `high contrast`
`font`	用于所有文字的字体，主题自身的字体作为其后备
`language`	`Chinese` 表示以中文说明问题
`problems`	`hide` 表示不显示问题

页面中的所有代码块

用 Markdown 编写的页面会把示意图写成语言为 dhole 的围栏代码块，它会变成 <pre><code class="language-dhole">。在引入脚本之后，只需一行即可将它们全部绘制出来：

<script>Dhole.renderAll();</script>

通过 JavaScript

该脚本会设置 window.Dhole；dist/dhole.esm.js 是相同内容的模块版本，dist/types/ 中包含供 TypeScript 使用的类型。

import { read, toSvg, render } from "https://cdn.jsdelivr.net/gh/MethodoxTech/MethodoxDhole@0.2/dist/dhole.esm.js";

// Into an element: the picture, and under it the problems.
render(text, document.getElementById("diagram"));

// Or by the pieces: the figure, every problem, and a sentence saying what was drawn.
const result = read(text);
for (const problem of result.problems)
  console.log(problem.toString());   // Line 3, column 7: 'lots' is not a number. Write a number with a dot for its decimals, such as 12.5.
if (result.figure)
  element.innerHTML = toSvg(result.figure, { measurer: result.measurer, description: result.summary });

read(text) 永远不会因为文本中的错误而抛出异常：无法读取的行会被略过并给出说明，其余部分照常绘制 —— 与 Draw Dhole 的行为相同。
toSvg(figure) 输出的 SVG 中，文字依然是文字，因此可以被选中、搜索和朗读；其标题就是示意图的标题，其描述就是 Describe Dhole 给出的那句话。
每个问题都有其 severity、line、column 和 length，以及 message 和 hint，还可以通过 describe("Chinese") 获取其中文措辞。

能绘制什么

Dhole 十七个种类中的十五个：流程图、时序图、状态图、类图和实体图、思维导图、时间线、甘特图，饼图、条形图、折线图、散点图、雷达图和象限图，以及看板。桑基图或表格会被指出 —— 它们可以在 Divooka 中绘制，但目前还不能在网页上绘制 —— 并被略过，文本中的其他示意图照常绘制。

文字由浏览器按图片所用的字体进行测量，因此无论读者拥有哪些字体，每个方框都能容纳其中的文字。

参考资料

MethodoxTech/MethodoxDhole —— 脚本、其类型定义以及语言规范。
Dhole 交互演示
Dhole 语言