Draw needlessly complex diagrams in the console.
npm install cli-diagramconst Diagram = require('cli-diagram');
const myDiagram = new Diagram()
.box(`Amazing`)
.line(1)
.box(`Isn't it?`);
console.log(myDiagram.draw());┌─────────────┐ ┌───────────────┐
│ │ │ │
│ Amazing │────│ Isn't it? │
│ │ │ │
└─────────────┘ └───────────────┘
More examples in this test file;
Diagrams are build from elements. There is a variety of elements available to mix and match.
Draw an outlined box with some string contents. Content can be multiline. Boxes are flexible enough to contain other diagrams allowing you to create complex nested structures.
.box('Hello, box!')
.box(content, options)┌─────────────────┐
│ │
│ Hello, box! │
│ │
└─────────────────┘
size {integer}: The padding of the box.
color {string}: The color of the box including the outline and contents.
Draw one or more lines to link elements. Lines spread out to take advantage of the available height.
.line(3)
.line(count, options)────
────
────
You can add labels to lines.
.line(['Hello, line!', null, 'Hi there'])
.line([label, label, ...])──┤Hello, arrow!├──
───────────────────
──┤Hi there ├──
size {integer}: The width of the lines.
color {string}: The color of the lines.
Draw one or more arrows to link elements. Arrows spread out to take advantage of the available height.
.arrow(['<--', '-->', '<->'])
.arrow([arrow, arrow, ...], options)◀───
───▶
◀──▶
There are multiple styles of arrows available. You can mix and match any of the inputs from the first two columns in the table below.
.arrow(['left', '--x', 'o-o'])◀───
───X
O──O
| Input text | Input symbolic | Result |
|---|---|---|
'left' |
'<--' |
◀─── |
'right' |
'-->' |
───▶ |
'both' |
'<->' |
◀──▶ |
'broken-left' |
'x--' |
X─── |
'broken-right' |
'--x' |
───X |
'broken-both' |
'x-x' |
X──X |
'round-left' |
'o--' |
O─── |
'round-right' |
'--o' |
───O |
'round-both' |
'o-o' |
O──O |
You can add labels to arrows.
.arrow(['<--:Hello, arrow!', '<--', '-->:Hi there'])
.arrow([arrow, arrow, ...])◀─┤Hello, arrow!├──
◀──────────────────
──┤Hi there ├─▶
size {integer}: The width of the arrows.
color {string}: The color of the arrows.
Add some space between elements.
.space(2)
.space(width)
A borderless box with some string contents and no padding. Content can be multiline. Containers are flexible enough to contain other diagrams allowing you to create complex nested structures.
.container('Hello, container!')
.container(content, options)Hello, container!
color {string}: The color of the containers contents.
verticalAlign {'top'|'middle'|'bottom'}: Vertical alignment of the string contents when there is height to spare.
.box('Vertical alignment option')
.container('Aligned to bottom', {verticalAlign: 'bottom'})┌───────────────────────────┐
│ │
│ Vertical align option │
│ │
└───────────────────────────┘Aligned to bottom
Contributors are always welcome! I don't care if you are a beginner or an expert, all help is welcome.
First, clone the repository and install the dependencies. Then run the test script:
npm test
Sometimes things are just that simple.