arkit

by dyatko

dyatko / arkit

JavaScript architecture diagrams and dependency graphs

558 Stars 21 Forks Last release: Not found MIT License 663 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

arkit
🇸🇪arkitektur

Arkit NPM package Download arkit Dependents Build status Test coverage Technical debt

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

Usage

# 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.

Configuration

Arkit can be configured using basic CLI arguments or advanced JSON, JS module or package.json configuration.

Basic CLI arguments

[email protected]:~$ 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]

Advanced arkit.json with JSON schema for autocomplete and validation

{
  "$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

Real-world examples

Express.js using
npx arkit

Express architecture graph

Arkit itself using
npx arkit
and config in package.json

Arkit dependency graph

ReactDOM using
npx arkit
and config in arkit.json

ReactDOM architecture graph

Vue/Nuxt TodoMVC using
yarn arkit -o arkit.svg

Vue and Nuxt dependency graph

Contribution

The tool is under active development, so please feel free to contribute with suggestions and pull requests. Your feedback is priceless.

Relevant projects

  • 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 by worldstar

GitHub stargazer map
Give a Github star to get on the map.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.