arkit

arkit visualises architectures of JavaScript, TypeScript and Flow codebases as meaningful and committable diagrams [🇸🇪 arkitektur]

• 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 PlantUML, SVG or PNG
• 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. JSON schema can assist with available options.

CLI arguments

$ npx arkit --help
Usage: arkit [options] [dir]

A CLI tool to visualise a JavaScript, TypeScript or Flow codebase architecture

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

JSON config

{
  "$schema": "https://raw.githubusercontent.com/dyatko/arkit/master/schema.json",
  "components": [
    {
        "type": "JavaScript",
        "patterns": ["**/*.js", "**/*.jsx"]
    },
    {
        "type": "TypeScript",
        "patterns": ["**/*.ts", "**/*.tsx"]
    }
  ],
  "excludePatterns": ["node_modules/**", "test/**", "tests/**", "**/*.test.*", "**/*.spec.*"]
}

Real-world examples

Simple example (Express.js, zero config)

Complex example (ReactDOM, JSON config)