Methodox Wiki
Product documentation
Methodox Home

Dhole Playground

Write Dhole on the left and see it drawn on the right, a moment after each change; anything Dhole cannot read as written is listed under the picture - click a problem to go to it. Start from one of the examples, or from a text of your own. The address keeps your text, so Copy link shares exactly what you see, and Save SVG saves the picture.

This page draws with Dhole's public build for the web - the same Dhole as Divooka's, ported and held to it, so a text draws here as it does in Divooka Compute. Fifteen of its seventeen kinds are drawn on a web page so far; a Sankey diagram or a table is said and left out, and draws in Divooka as ever. To draw Dhole on a page of your own, see Dhole on a web page.

In the editor, Tab indents - a line indented under another belongs to it - and Shift+Tab takes it back; press Escape first to leave the editor with Tab.

Examples

Every example below is the text the playground runs when it is picked: copy one into Divooka's Draw Dhole or Write Dhole and it draws the same picture there.

Flowchart

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 -> Add milk?
Add milk? -> Pour the milk: yes
Add milk? -> Enjoy [end, good]: no
Pour the milk -> Enjoy
Brew the coffee -> Enjoy

Flowchart with groups

flowchart Ordering online
direction: right
cart: Fill the cart
group Checkout
  pay: Pay [io]
  check: Card accepted?
  pay -> check
group Warehouse [teal]
  pick: Pick the items
  pack: Pack the box
  pick -> pack
db: Orders [database]
cart -> pay
check -> pick: yes
check -> pay: no, try again [bad]
pick --> db: record
pack -> Ship it [end]

Sequence diagram

sequence Paying at the till
actor Customer
participant Till
participant bank: Bank of Example
database Ledger
Customer -> Till: Scan the items
Till -> bank: Ask to pay 12.50
bank -> Ledger: Hold the amount
Ledger --> bank: Held
if Card accepted
  bank --> Till: Approved
  Till --> Customer: Receipt
else Card declined
  bank --> Till: Declined
  Till --> Customer: Try another card
note over Till, bank: Card details never stay on the till

State diagram

state Media player
direction: right
* -> Stopped
Stopped -> Playing: play
Playing -> Paused: pause
Paused -> Playing: play
Playing -> Stopped: stop
Paused -> Stopped: stop
Playing
  * -> Buffering
  Buffering -> Streaming: ready
  Streaming -> Buffering: stall

Class diagram

class Shapes
Shape [abstract]
  + name: string
  + area(): number
  + draw()
Circle
  - radius: number
  + area(): number
Square
  - side: number
  + area(): number
Canvas
  + shapes: Shape[]
  + render()
Shape <|- Circle
Shape <|- Square
Canvas o- Shape: holds

Entity diagram

entity A small shop
Customer
  id: number [key]
  name: text
  email: text [unique]
Order
  id: number [key]
  customer: number [ref]
  placed: date
Product
  id: number [key]
  title: text
  price: number
Line
  order: number [key, ref]
  product: number [key, ref]
  quantity: number
Customer 1-* Order: places
Order 1-1..* Line: holds
Product 1-* Line: appears in

Mind map

mindmap
  Dhole
    Diagrams
      Flowcharts
      Sequences
      States
    Charts
      Pies
      Bars
    Plans
      Gantt
      Timelines
    Outputs
      PNG
      SVG
      PDF

Timeline

timeline Computing in five moments
section Machines
1936: Turing's machine on paper
1945: ENIAC; First stored programs
section People
1971: The microprocessor
1984: The Macintosh
1991: The web

Gantt chart

gantt Launching the site
start: 2026-11-02
skip: weekends
today: 2026-11-12
section Design
Sketches: 3d [done]
Mock-ups: after Sketches, 4d [done]
section Build
Pages: after Mock-ups, 6d [active]
Search: after Mock-ups, 4d
Testing: after Pages and Search, 3d [critical]
section Ship
Launch: after Testing, milestone

Pie chart

pie Where the day goes
Sleep: 8
Work: 8
Family: 4
Reading: 2
Errands: 2

Bar chart

bar Sales by region
labels: North, South, East, West
y axis: Units
2025: 42, 31, 27, 18
2026: 45, 28, 34, 22

Line chart

line A week of weather
labels: Mon, Tue, Wed, Thu, Fri, Sat, Sun
y axis: Degrees
points: on
Low: 3, 5, 4, 6, 7, 5, 4
High: 9, 11, 10, 12, 14, 13, 11

Scatter chart

xy Height and weight
x axis: Height (cm)
y axis: Weight (kg)
trend: on
Team A: (160, 55), (165, 61), (170, 66), (175, 70), (180, 79), (185, 84)
Team B: (150, 48), (158, 53), (163, 60), (171, 63), (178, 71)

Radar chart

radar Two characters
labels: Speed, Power, Range, Defence, Magic
Knight: 3, 8, 2, 9, 1
Mage: 4, 2, 8, 2, 9

Quadrant chart

quadrant What to build first
x axis: Little effort .. Much effort
y axis: Little value .. Much value
top left: Do now
top right: Plan
bottom left: Maybe
bottom right: Skip
Search: 0.3, 0.85
Dark mode: 0.2, 0.4
Offline sync: 0.8, 0.75
New logo: 0.65, 0.2
Export to PDF: 0.45, 0.6

Board

kanban Release 2.0
To do
  Write the guide
  Fix the login [bad]
Doing
  New charts [blue]
  Translations
Done
  The parser [good]

In the editor's Golden theme

flowchart Golden theme
theme: golden
direction: right
Idea -> Sketch -> Build -> Test?
Test? -> Ship [good]: pass
Test? -> Build: fail [bad]

Where next