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

# 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 -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 type or file path to save
  -f, --first      File patterns to start with                          [string]
  -e, --exclude    File patterns to exclude
                    [default: "node_modules,test,tests,**/*.test.*,**/*.spec.*"]
  -d, --directory  Working directory                              [default: "."]
  -h, --help       Show help                                           [boolean]
  -v, --version    Show version number                                 [boolean]

Advanced arkit.json with JSON schema

{
  "$schema": "https://arkit.js.org/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 npx arkit -o dist/arkit.png src/

ReactDOM using npx arkit and JSON config