Skip to content
Draw needlessly complex diagrams in the console
JavaScript
Branch: master
Clone or download

Latest commit

Latest commit 2867322 Mar 5, 2020

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
documentation Added automatic generation of example image Feb 19, 2020
src Fixed bug, added test Feb 27, 2020
test Fixed bug, added test Feb 27, 2020
.eslintrc.js Changed eslint config to ignore .d.ts files Feb 26, 2020
.gitignore Fix in readme Feb 23, 2020
.mocharc.js Basic setup Feb 18, 2020
.nycrc.json Basic setup Feb 18, 2020
.travis.yml Fix in readme Feb 23, 2020
LICENSE Basic setup Feb 18, 2020
README.md Added line labels to readme Feb 24, 2020
package-lock.json Replaced Chalk with Ansi-colors Feb 27, 2020
package.json Version bump to 0.2.0 Mar 4, 2020
stryker.conf.js Basic setup Feb 18, 2020

README.md

CLI Diagram

Draw needlessly complex diagrams in the console.

cli-diagram example

Install

npm install cli-diagram

Getting started

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

Elements

Diagrams are build from elements. There is a variety of elements available to mix and match.

Box

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!   │
│                 │
└─────────────────┘

Options

size {integer}: The padding of the box.

color {string}: The color of the box including the outline and contents.

Line

Draw one or more lines to link elements. Lines spread out to take advantage of the available height.

.line(3)
.line(count, options)
────
────
────

Labels

You can add labels to lines.

.line(['Hello, line!', null, 'Hi there'])
.line([label, label, ...])
──┤Hello, arrow!├──
───────────────────
──┤Hi there     ├──

Options

size {integer}: The width of the lines.

color {string}: The color of the lines.

Arrow

Draw one or more arrows to link elements. Arrows spread out to take advantage of the available height.

.arrow(['<--', '-->', '<->'])
.arrow([arrow, arrow, ...], options)
◀───
───▶
◀──▶

Styles

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

Labels

You can add labels to arrows.

.arrow(['<--:Hello, arrow!', '<--', '-->:Hi there'])
.arrow([arrow, arrow, ...])
◀─┤Hello, arrow!├──
◀──────────────────
──┤Hi there     ├─▶

Options

size {integer}: The width of the arrows.

color {string}: The color of the arrows.

Space

Add some space between elements.

.space(2)
.space(width)

Container

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!

Options

color {string}: The color of the containers contents.

Contributing

Contributors are always welcome! I don't care if you are a beginner or an expert, all help is welcome.

Testing cli-diagram

First, clone the repository and install the dependencies. Then run the test script:

npm test

Sometimes things are just that simple.

You can’t perform that action at this time.