- Notifications
You must be signed in to change notification settings - Fork45
JavaScript architecture diagrams and dependency graphs
License
dyatko/arkit
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
🇸🇪arkitektur
Visualises JavaScript, TypeScript and Flow codebases as meaningful and committable architecture diagrams
- Associates source files with configured architectural components
- Renders grouped components and dependency graph including Node.js modules
- Supports JavaScript, TypeScript and Flow source code and Vue/Nuxt
- Exports codebase architecture visualisation as SVG, PNG or Plant UML diagram
- Integrates into development flow, so your CI, VCS, README and PRs are happy
# Run arkit straight awaynpx arkit# Or add it to your project as a dev dependencynpm install arkit --save-devyarn add arkit --dev
# Run arkit against your source folder and save result as SVGnpx arkit src/ -o arkit.svg# You can also specify source files to start from and output formatnpx arkit -f src/main.js -o puml# And get some more with debugging and file exclusionsLEVEL=info npx arkit -e"node_modules,test,dist,coverage" -o puml
If your project is huge and first diagrams look messy, it's better to generate them per feature, architectural layer, etc.
Once you satisfied with results, add arkit command to your build script, so it will keep your architecture diagrams up-to-date.
Arkit can be configured using basic CLI arguments or advanced JSON, JS module or package.json configuration.
user@machine:~$npx arkit --helparkit [directory]Options: -d, --directory Working directory [default: "."] -c, --config Config file path (json or js) [default: "arkit.json"] -o, --output Output path or type (svg, png or puml) [default: "arkit.svg"] -f, --first File patterns to be first in the graph [string] -e, --exclude File patterns to exclude from the graph [default: "test,tests,dist,coverage,**/*.test.*,**/*.spec.*,**/*.min.*"] -h, --help Show help [boolean] -v, --version Show version number [boolean]
{"$schema":"https://arkit.pro/schema.json","excludePatterns": ["test/**","tests/**","**/*.test.*","**/*.spec.*"],"components": [ {"type":"Dependency","patterns": ["node_modules/*"] }, {"type":"Component","patterns": ["**/*.ts","**/*.tsx"] } ],"output": [ {"path":"arkit.svg","groups": [ {"first":true,"components": ["Component"] }, {"type":"Dependencies","components": ["Dependency"] } ] } ]}See more possible JSON configuration options in the examples below
Express.js usingnpx arkit
Arkit itself usingnpx arkit andconfig in package.json
ReactDOM usingnpx arkit andconfig in arkit.json
Vue/Nuxt TodoMVC usingyarn arkit -o arkit.svg
The tool is under active development, so please feel free tocontribute with suggestions and pull requests. Your feedback is priceless.
- Dependency cruiser validates and visualizes dependencies
- Madge generates a visual graph of module dependencies
- dependo visualizes CommonJS, AMD, or ES6 module dependencies
- JSCity visualizes JavaScript source code as navigable 3D cities
- colony in-browser graphs representing the links between your Node.js code and its dependencies
- TsUML generates UML diagrams from TypeScript source code
Fun stats, stargazers map byworldstar
Give a Github star to get on the map.
About
JavaScript architecture diagrams and dependency graphs
Topics
Resources
License
Code of conduct
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Releases
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors6
Uh oh!
There was an error while loading.Please reload this page.