Diagrammo — All Chart Types
Every
dgmocode fence below renders a different chart type, and the prose around them shows the Markdown formatting the integration renders alongside diagrams. Edit the data to experiment! For the full editor experience visit diagrammo.app.
Markdown formatting
Diagrams live inside ordinary Markdown, so everything below renders normally next to the dgmo fences — bold, italic, strikethrough, inline code, and links.
Bullet lists & indentation
- Crew roster
- Captain
- Quartermaster
- Boatswain
- Gunner
- Captain
- Ship's stores
- Powder and shot
- Salt pork and biscuit
Numbered steps
- Hoist the colours
- Come alongside the prize
- Board and secure the hold
- Take the powder room first
- Then the captain's cabin
Task list
- [x] Careen the hull
- [x] Re-tar the rigging
- [ ] Divide the plunder
Table
| Vessel | Guns | Crew | Status |
|---|---|---|---|
| Queen Anne's Revenge | 40 | 300 | Flagship |
| Ranger | 10 | 80 | Consort |
| Adventure | 8 | 60 | Captured |
Blockquote & code
A merry life and a short one shall be my motto. — Bartholomew Roberts
js
const plunder = ships.reduce((sum, s) => sum + s.gold, 0);Data
Arc Diagram
Area Chart (line + fill)
Bar Chart
Bar Chart (stacked)
Bubble Chart (scatter + size)
scatter Pirate Fleets of the Caribbean
x-label Ruthlessness
y-label Plunder (chests)
size-label Crew
[English Pirates] red
Blackbeard 90 85 300
Calico Jack 55 32 110
Anne Bonny 70 28 90
[French Buccaneers] blue
L'Olonnais 80 60 220
Pierre le Grand 45 25 70
[Welsh Privateers] green
Henry Morgan 85 120 470
Bartholomew Roberts 88 110 510Arc — Chord Layout
arc Pirate Alliance Network
layout chord
Blackbeard -> Bonnet 150
Blackbeard -> Vane 80
Blackbeard -> Hornigold 120
Bonnet -> Rackham 40
Vane -> Rackham 60
Rackham -> Bonny 200
Bonny -> Read 180
Roberts -> Davis 90
Roberts -> Anstis 70
Hornigold -> Bonnet 50
Vane -> Bonny 30
Roberts -> Rackham 20
Rackham -> Roberts 100