Methodox Wiki
Product documentation
Methodox Home

Dhole on a web page

Dhole draws on a web page as it does in Divooka. Its public build is one script with no dependencies, published in MethodoxTech/MethodoxDhole under the MIT licence - the script and the language's specification both - and served from there by jsDelivr. The playground is drawn with it.

It is the same Dhole, not a look-alike: a port of Divooka's own, held to it text by text. A text draws a figure of the same size, with every word where Divooka puts it, in the same themes, and says the same problems in the same words, in English or in Chinese.

The script

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

@0.2 takes the newest 0.2 release; @0.2.0 keeps a page on that one.

A diagram in an element

The script defines <dhole-diagram>, which draws the text it holds:

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

It draws in a shadow root of its own, so the page's styles and the picture leave each other alone, and draws again whenever its text changes. It takes four attributes:

Attribute Value
theme the theme when the text names none: light, dark, presentation, minimal, classic, print, golden, quiet gold, silver gold or high contrast
font a font for every word, the theme's own kept after it
language Chinese to say the problems in Chinese
problems hide to leave the problems out

Every code block of a page

A page written in Markdown writes a diagram as a fenced code block whose language is dhole, which becomes <pre><code class="language-dhole">. After the script, one line draws them all:

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

From JavaScript

The script sets window.Dhole; dist/dhole.esm.js is the same as a module, and dist/types/ has its types for 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) never throws for a mistake in the text: a line that cannot be read is left out and said, and the rest is drawn - as Draw Dhole does.
  • toSvg(figure) gives an SVG whose words stay words, so they can be selected, searched and read aloud; its title is the diagram's, and its description is the sentence Describe Dhole gives.
  • Each problem has its severity, line, column and length, its message and hint, and describe("Chinese") for its words in Chinese.

What is drawn

Fifteen of Dhole's seventeen kinds: flowcharts, sequence, state, class and entity diagrams, mind maps, timelines, Gantt charts, pie, bar, line, scatter, radar and quadrant charts, and boards. A Sankey diagram or a table is said - drawn in Divooka, not yet on a web page - and left out, and the other diagrams of the text are drawn.

Text is measured by the browser in the faces the picture is drawn in, so every box fits its words in whatever fonts the reader has.

References