JavaScript architecture diagrams and dependency graphs
# Run arkit straight away
npx arkit
# Or add it to your project as a dev dependency
npm install arkit --save-dev
yarn add arkit --dev
# Run arkit against your source folder and save result as SVG
npx arkit src/ -o arkit.svg
# You can also specify source files to start from and output format
npx arkit -f src/main.js -o puml
# And get some more with debugging and file exclusions
LEVEL=info npx arkit -e "node_modules,test,dist,coverage" -o puml
:warning: Arkit is using a web service to convert PlantUML to SVG/PNG. It's hosted at arkit.pro and does not store any data. If you want to use Arkit at work make sure this is fine with your company tools policy.
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 --help
arkit [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
npx arkit
npx arkit
and config in package.jsonnpx arkit
and config in arkit.jsonyarn arkit -o arkit.svg
The tool is under active development, so please feel free to contribute with suggestions and pull requests. Your feedback is priceless.
Give a Github star to get on the map.