{"id":13825446,"url":"https://github.com/Lakitna/cli-diagram","last_synced_at":"2025-07-08T22:31:18.406Z","repository":{"id":42928400,"uuid":"240906852","full_name":"Lakitna/cli-diagram","owner":"Lakitna","description":"Draw needlessly complex diagrams in the console","archived":false,"fork":false,"pushed_at":"2023-01-06T02:33:33.000Z","size":320,"stargazers_count":218,"open_issues_count":16,"forks_count":10,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-10-28T14:52:49.784Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/cli-diagram","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Lakitna.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-02-16T14:36:16.000Z","updated_at":"2024-09-18T02:25:51.000Z","dependencies_parsed_at":"2023-02-05T03:16:24.802Z","dependency_job_id":null,"html_url":"https://github.com/Lakitna/cli-diagram","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lakitna%2Fcli-diagram","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lakitna%2Fcli-diagram/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lakitna%2Fcli-diagram/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lakitna%2Fcli-diagram/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Lakitna","download_url":"https://codeload.github.com/Lakitna/cli-diagram/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225470631,"owners_count":17479366,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-04T09:01:21.075Z","updated_at":"2024-11-20T04:30:25.213Z","avatar_url":"https://github.com/Lakitna.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# CLI Diagram\n\nDraw needlessly complex diagrams in the console.\n\n![cli-diagram example](./documentation/example.png)\n\n## Install\n\n```shell\nnpm install cli-diagram\n```\n\n## Getting started\n\n```javascript\nconst Diagram = require('cli-diagram');\n\nconst myDiagram = new Diagram()\n    .box(`Amazing`)\n    .line(1)\n    .box(`Isn't it?`);\n\nconsole.log(myDiagram.draw());\n```\n\n```plain\n┌─────────────┐    ┌───────────────┐\n│             │    │               │\n│   Amazing   │────│   Isn't it?   │\n│             │    │               │\n└─────────────┘    └───────────────┘\n```\n\n[More examples in this test file](./test/integration/diagram.js);\n\n## Elements\n\nDiagrams are build from elements. There is a variety of elements available to mix and match.\n\n### Box\n\nDraw 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.\n\n```javascript\n.box('Hello, box!')\n.box(content, options)\n```\n\n```plain\n┌─────────────────┐\n│                 │\n│   Hello, box!   │\n│                 │\n└─────────────────┘\n```\n\n#### Options\n\n`size {integer}`: The padding of the box.\n\n`color {string}`: The color of the box including the outline and contents.\n\n### Line\n\nDraw one or more lines to link elements. Lines spread out to take advantage of the available height.\n\n```javascript\n.line(3)\n.line(count, options)\n```\n\n```plain\n────\n────\n────\n```\n\n#### Labels\n\nYou can add labels to lines.\n\n```javascript\n.line(['Hello, line!', null, 'Hi there'])\n.line([label, label, ...])\n```\n\n```plain\n──┤Hello, arrow!├──\n───────────────────\n──┤Hi there     ├──\n```\n\n#### Options\n\n`size {integer}`: The width of the lines.\n\n`color {string}`: The color of the lines.\n\n### Arrow\n\nDraw one or more arrows to link elements. Arrows spread out to take advantage of the available height.\n\n```javascript\n.arrow(['\u003c--', '--\u003e', '\u003c-\u003e'])\n.arrow([arrow, arrow, ...], options)\n```\n\n```plain\n◀───\n───▶\n◀──▶\n```\n\n#### Styles\n\nThere are multiple styles of arrows available. You can mix and match any of the inputs from the first two columns in the table below.\n\n```javascript\n.arrow(['left', '--x', 'o-o'])\n```\n\n```plain\n◀───\n───X\nO──O\n```\n\n| Input text       | Input symbolic | Result |\n|------------------|----------------|--------|\n| `'left'`         | `'\u003c--'`        | `◀───` |\n| `'right'`        | `'--\u003e'`        | `───▶` |\n| `'both'`         | `'\u003c-\u003e'`        | `◀──▶` |\n| `'broken-left'`  | `'x--'`        | `X───` |\n| `'broken-right'` | `'--x'`        | `───X` |\n| `'broken-both'`  | `'x-x'`        | `X──X` |\n| `'round-left'`   | `'o--'`        | `O───` |\n| `'round-right'`  | `'--o'`        | `───O` |\n| `'round-both'`   | `'o-o'`        | `O──O` |\n\n#### Labels\n\nYou can add labels to arrows.\n\n```javascript\n.arrow(['\u003c--:Hello, arrow!', '\u003c--', '--\u003e:Hi there'])\n.arrow([arrow, arrow, ...])\n```\n\n```plain\n◀─┤Hello, arrow!├──\n◀──────────────────\n──┤Hi there     ├─▶\n```\n\n#### Options\n\n`size {integer}`: The width of the arrows.\n\n`color {string}`: The color of the arrows.\n\n### Space\n\nAdd some space between elements.\n\n```javascript\n.space(2)\n.space(width)\n```\n\n```plain\n\n```\n\n### Container\n\nA 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.\n\n```javascript\n.container('Hello, container!')\n.container(content, options)\n```\n\n```plain\nHello, container!\n```\n\n#### Options\n\n`color {string}`: The color of the containers contents.\n\n`verticalAlign {'top'|'middle'|'bottom'}`: Vertical alignment of the string contents when there is height to spare.\n\n```javascript\n.box('Vertical alignment option')\n.container('Aligned to bottom', {verticalAlign: 'bottom'})\n```\n\n```plain\n┌───────────────────────────┐\n│                           │\n│   Vertical align option   │\n│                           │\n└───────────────────────────┘Aligned to bottom\n```\n\n## Contributing\n\nContributors are always welcome! I don't care if you are a beginner or an expert, all help is welcome.\n\n## Testing cli-diagram\n\nFirst, clone the repository and install the dependencies. Then run the test script:\n\n```plain\nnpm test\n```\n\nSometimes things are just that simple.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLakitna%2Fcli-diagram","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FLakitna%2Fcli-diagram","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLakitna%2Fcli-diagram/lists"}