{"id":13527412,"url":"https://github.com/dyatko/arkit","last_synced_at":"2025-05-14T05:12:42.453Z","repository":{"id":37271180,"uuid":"168193073","full_name":"dyatko/arkit","owner":"dyatko","description":"JavaScript architecture diagrams and dependency graphs","archived":false,"fork":false,"pushed_at":"2025-05-06T02:39:52.000Z","size":10178,"stargazers_count":959,"open_issues_count":25,"forks_count":45,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-05-06T03:30:07.859Z","etag":null,"topics":["architecture","cli","codebase","component","diagram","flow","generate","javascript","js","plantuml","ts","typescript","uml","visualisation"],"latest_commit_sha":null,"homepage":"https://arkit.pro","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/dyatko.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2019-01-29T17:02:57.000Z","updated_at":"2025-05-05T21:59:57.000Z","dependencies_parsed_at":"2023-09-24T05:09:49.100Z","dependency_job_id":"d1bca267-22b8-4acf-bba7-b46b03502a9f","html_url":"https://github.com/dyatko/arkit","commit_stats":{"total_commits":1726,"total_committers":8,"mean_commits":215.75,"dds":0.5069524913093859,"last_synced_commit":"f37697638e8d14d3aa296201e58babd9058a2059"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dyatko%2Farkit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dyatko%2Farkit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dyatko%2Farkit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dyatko%2Farkit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dyatko","download_url":"https://codeload.github.com/dyatko/arkit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254076851,"owners_count":22010611,"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":["architecture","cli","codebase","component","diagram","flow","generate","javascript","js","plantuml","ts","typescript","uml","visualisation"],"created_at":"2024-08-01T06:01:47.509Z","updated_at":"2025-05-14T05:12:37.408Z","avatar_url":"https://github.com/dyatko.png","language":"JavaScript","readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://arkit.pro\"\u003e\u003cimg src=\"arkit.svg?sanitize=true\" alt=\"arkit\" /\u003e\u003c/a\u003e\u003cbr /\u003e\n  \u003ccode\u003e🇸🇪arkitektur\u003c/code\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/arkit\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/arkit.svg?label=%20\u0026style=flat-square\" alt=\"Arkit NPM package\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/arkit\"\u003e\u003cimg src=\"https://img.shields.io/npm/dw/arkit.svg?style=flat-square\" alt=\"Download arkit\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://libraries.io/npm/arkit/dependents\"\u003e\u003cimg src=\"https://img.shields.io/librariesio/dependents/npm/arkit.svg?style=flat-square\" alt=\"Dependents\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://travis-ci.org/dyatko/arkit/branches\"\u003e\u003cimg src=\"https://img.shields.io/travis/dyatko/arkit/master.svg?style=flat-square\" alt=\"Build status\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://codeclimate.com/github/dyatko/arkit/code\"\u003e\u003cimg src=\"https://img.shields.io/codeclimate/coverage/dyatko/arkit.svg?style=flat-square\" alt=\"Test coverage\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://codeclimate.com/github/dyatko/arkit/issues\"\u003e\u003cimg src=\"https://img.shields.io/codeclimate/tech-debt/dyatko/arkit.svg?style=flat-square\" alt=\"Technical debt\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n# Visualises JavaScript, TypeScript and Flow codebases as meaningful and committable architecture diagrams\n\n- Associates source files with configured architectural components\n- Renders grouped components and dependency graph including Node.js modules\n- Supports JavaScript, TypeScript and Flow source code and Vue/Nuxt\n- Exports codebase architecture visualisation as SVG, PNG or Plant UML diagram\n- Integrates into development flow, so your CI, VCS, README and PRs are happy\n\n## Usage\n\n```sh\n# Run arkit straight away\nnpx arkit\n\n# Or add it to your project as a dev dependency\nnpm install arkit --save-dev\nyarn add arkit --dev\n```\n\n```sh\n# Run arkit against your source folder and save result as SVG\nnpx arkit src/ -o arkit.svg\n\n# You can also specify source files to start from and output format\nnpx arkit -f src/main.js -o puml\n\n# And get some more with debugging and file exclusions\nLEVEL=info npx arkit -e \"node_modules,test,dist,coverage\" -o puml\n```\n\n:warning: Arkit is using a web service to convert PlantUML to SVG/PNG. \nIt's hosted at arkit.pro and does not store any data.\n**If you want to use Arkit at work make sure this is fine with your company tools policy**.\n\nIf your project is huge and first diagrams look messy, it's better to generate them per feature, architectural layer, etc.\n\nOnce you satisfied with results, add arkit command to your build script, so it will keep your architecture diagrams up-to-date.\n\n## Configuration\n\nArkit can be configured using basic CLI arguments or advanced JSON, JS module or package.json configuration.\n\n#### Basic CLI arguments\n\n```console\nuser@machine:~$ npx arkit --help\narkit [directory]\n\nOptions:\n  -d, --directory  Working directory                              [default: \".\"]\n  -c, --config     Config file path (json or js)         [default: \"arkit.json\"]\n  -o, --output     Output path or type (svg, png or puml) [default: \"arkit.svg\"]\n  -f, --first      File patterns to be first in the graph               [string]\n  -e, --exclude    File patterns to exclude from the graph\n        [default: \"test,tests,dist,coverage,**/*.test.*,**/*.spec.*,**/*.min.*\"]\n  -h, --help       Show help                                           [boolean]\n  -v, --version    Show version number                                 [boolean]\n```\n\n#### Advanced arkit.json with JSON schema for autocomplete and validation\n\n```json\n{\n  \"$schema\": \"https://arkit.pro/schema.json\",\n  \"excludePatterns\": [\"test/**\", \"tests/**\", \"**/*.test.*\", \"**/*.spec.*\"],\n  \"components\": [\n    {\n      \"type\": \"Dependency\",\n      \"patterns\": [\"node_modules/*\"]\n    },\n    {\n      \"type\": \"Component\",\n      \"patterns\": [\"**/*.ts\", \"**/*.tsx\"]\n    }\n  ],\n  \"output\": [\n    {\n      \"path\": \"arkit.svg\",\n      \"groups\": [\n        {\n          \"first\": true,\n          \"components\": [\"Component\"]\n        },\n        {\n          \"type\": \"Dependencies\",\n          \"components\": [\"Dependency\"]\n        }\n      ]\n    }\n  ]\n}\n```\n\n**See more possible JSON configuration options in the examples below**\n\n## Real-world examples\n\n#### [Express.js](https://github.com/dyatko/arkit/tree/master/test/express) using `npx arkit`\n![Express architecture graph](test/express/express.svg?sanitize=true)\n\n#### [Arkit itself](https://github.com/dyatko/arkit/tree/master/src) using `npx arkit` and [config in package.json](https://github.com/dyatko/arkit/blob/master/package.json#L17)\n![Arkit dependency graph](dist/arkit.svg?sanitize=true)\n\n#### [ReactDOM](https://github.com/dyatko/arkit/tree/master/test/react-dom) using `npx arkit` and [config in arkit.json](https://github.com/dyatko/arkit/blob/master/test/react-dom/react-arkit.json)\n![ReactDOM architecture graph](test/react-dom/arkit.svg?sanitize=true)\n\n#### [Vue/Nuxt TodoMVC](https://github.com/dyatko/arkit-nuxt-todomvc) using `yarn arkit -o arkit.svg`\n![Vue and Nuxt dependency graph](https://raw.githubusercontent.com/dyatko/arkit-nuxt-todomvc/master/arkit.svg?sanitize=true)\n\n## Contribution\n\nThe tool is under active development, so please feel free to [contribute with suggestions](https://github.com/dyatko/arkit/issues/new/choose) and pull requests. Your feedback is priceless.\n\n#### Relevant projects\n\n- [Dependency cruiser](https://github.com/sverweij/dependency-cruiser) validates and visualizes dependencies\n- [Madge](https://github.com/pahen/madge) generates a visual graph of module dependencies\n- [dependo](https://github.com/auchenberg/dependo) visualizes CommonJS, AMD, or ES6 module dependencies\n- [JSCity](https://github.com/aserg-ufmg/JSCity) visualizes JavaScript source code as navigable 3D cities\n- [colony](https://github.com/hughsk/colony) in-browser graphs representing the links between your Node.js code and its dependencies\n- [TsUML](https://github.com/remojansen/TsUML) generates UML diagrams from TypeScript source code\n\n\u003ch4 align=\"center\"\u003eFun stats, stargazers map by \u003ca href=\"https://github.com/dyatko/worldstar\"\u003eworldstar\u003c/a\u003e\u003c/h4\u003e\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"worldstar.svg?sanitize=true\" alt=\"GitHub stargazer map\" /\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/dyatko/arkit\"\u003eGive a Github star\u003c/a\u003e to get on the map.\u003c/p\u003e\n","funding_links":[],"categories":["JavaScript","cli","Tools","typescript"],"sub_categories":["React Components"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdyatko%2Farkit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdyatko%2Farkit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdyatko%2Farkit/lists"}