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 and try it out:

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

# Run arkit against your source folder and save result as SVG
npx arkit -o arkit.svg src/

# Also you can specify output format and source files to start from
npx arkit -o puml -f src/main.js

# And get some more with debugging and file exclusions
LEVEL=info npx arkit -o puml -e "node_modules/,test,dist,coverage"

First results might look messy since it's better to generate diagrams per feature, architectural layer, etc. As 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

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 more possible JSON configuration options in the examples below

---

Real-world examples

Express.js using npx arkit

Arkit itself using arkit -o dist/arkit.png -f dist/arkit.js dist/

ReactDOM using npx arkit and JSON config