arkit

🇸🇪arkitektur

Visualises JavaScript, TypeScript and Flow codebases as meaningful and committable architecture diagrams

• Supports JavaScript, Node.js, TypeScript and Flow code
• Identifies, connects and groups configured architectural components
• Visualises all components or some segments of the architecture
• Exports codebase visualisation as SVG, PNG or Plant UML diagram
• Integrates into development flow, so your CI, VCS, README and PRs are happy

Usage

Add arkit to your project using NPM or Yarn:

npm install arkit --save-dev
yarn add arkit --dev

Configuration

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

Basic CLI arguments

user@machine:~$ npx arkit --help
arkit [directory]

Options:
  -o, --output     Output file paths or type, e.g. arkit.svg or puml
  -f, --first      First component file patterns, e.g. src/index.js
  -e, --exclude    File patterns to exclude, e.g. "node_modules"
  -d, --directory  Working directory                              [default: "."]
  -h, --help       Show help                                           [boolean]
  -v, --version    Show version number                                 [boolean]

Advanced arkit.json with JSON schema

{
  "$schema": "https://raw.githubusercontent.com/dyatko/arkit/master/schema.json",
  "components": [
    {
        "type": "Component",
        "patterns": ["**/*.ts", "**/*.tsx"]
    }
  ],
  "excludePatterns": ["node_modules/**", "test/**", "tests/**", "**/*.test.*", "**/*.spec.*"],
  "output": {
    "path": "arkit.svg"
  }
}

See all possible JSON configuration options in the examples below

Real-world examples

Simple diagram: Express.js with zero config

Complex diagram: ReactDOM with JSON config