在網頁上使用 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 語言