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 —— 本页所用的脚本，可用于你自己的页面。