Dhole 互動演示

在左側編寫 Dhole，每次修改後稍等片刻，右側就會顯示繪製結果；Dhole 無法按所寫內容讀懂的地方都會列在圖片下方 —— 按一下某個問題即可跳轉到相應位置。你可以從某個示例開始，也可以從自己的文字開始。地址會儲存你的文字，因此 Copy link 分享的正是你所看到的內容，Save SVG 則會儲存圖片。

本頁使用 Dhole 面向網頁的公開構建進行繪製 —— 它與 Divooka 中的 Dhole 相同，經過移植並與之對照校驗，因此同一段文字在這裡的繪製效果與在 Divooka Compute 中相同。目前十七個種類中有十五個可以在網頁上繪製；桑基圖或表格會被指出並略過，但在 Divooka 中依然可以照常繪製。要在你自己的頁面上繪製 Dhole，請參閱在網頁上使用 Dhole。

在編輯器中，Tab 用於縮排 —— 縮排在另一行下方的行從屬於該行 —— Shift+Tab 則取消縮排；如果要用 Tab 離開編輯器，請先按 Escape。

示例

下面的每個示例都是選中它時互動演示所執行的文字：把任意一個複製到 Divooka 的 Draw Dhole 或 Write 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 -> Add milk?
Add milk? -> Pour the milk: yes
Add milk? -> Enjoy [end, good]: no
Pour the milk -> Enjoy
Brew the coffee -> Enjoy

帶分組的流程圖

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 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 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 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 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

思維導圖

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

時間線

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 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 Where the day goes
Sleep: 8
Work: 8
Family: 4
Reading: 2
Errands: 2

條形圖

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

折線圖

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

散點圖

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 Two characters
labels: Speed, Power, Range, Defence, Magic
Knight: 3, 8, 2, 9, 1
Mage: 4, 2, 8, 2, 9

象限圖

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

看板

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

使用編輯器的 Golden 主題

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

接下來

語言 —— 所有種類共通的內容。
問題 —— 每個問題的含義，以及如何修正。
在網頁上使用 Dhole —— 本頁所用的指令碼，可用於你自己的頁面。