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
Usage: arkit [options] [dir]
Options:
  -V, --version            output the version number
  -f, --first [file ...]   First component file patterns, e.g. src/index.js
  -o, --output [file ...]  Output file paths or type, e.g. arkit.svg or puml
  -h, --help               output usage information

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