Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

arkit

Package Overview
Dependencies
Maintainers
1
Versions
60
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

arkit

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

  • 1.5.4
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
1.5K
decreased by-39.76%
Maintainers
1
Weekly downloads
 
Created
Source

arkit
🇸🇪arkitektur

Arkit NPM package Download arkit Dependents Build status Test coverage Technical debt

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

  • Associates source files with configured architectural components
  • Renders grouped components and dependency graph including Node.js modules
  • Supports JavaScript, TypeScript and Flow source code and Vue/Nuxt
  • Exports codebase architecture 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 -e "node_modules,test,dist,coverage" -o puml

If your project is huge and first diagrams look messy, it's better to generate them per feature, architectural layer, etc.

Once 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:
  -d, --directory  Working directory                              [default: "."]
  -c, --config     Config file path (json or js)         [default: "arkit.json"]
  -o, --output     Output path or type (svg, png or puml) [default: "arkit.svg"]
  -f, --first      File patterns to be first in the graph               [string]
  -e, --exclude    File patterns to exclude from the graph
        [default: "test,tests,dist,coverage,**/*.test.*,**/*.spec.*,**/*.min.*"]
  -h, --help       Show help                                           [boolean]
  -v, --version    Show version number                                 [boolean]
Advanced arkit.json with JSON schema for autocomplete and validation
{
  "$schema": "https://arkit.pro/schema.json",
  "excludePatterns": ["test/**", "tests/**", "**/*.test.*", "**/*.spec.*"],
  "components": [
    {
      "type": "Dependency",
      "patterns": ["node_modules/*"]
    },
    {
      "type": "Component",
      "patterns": ["**/*.ts", "**/*.tsx"]
    }
  ],
  "output": [
    {
      "path": "arkit.svg",
      "groups": [
        {
          "first": true,
          "components": ["Component"]
        },
        {
          "type": "Dependencies",
          "components": ["Dependency"]
        }
      ]
    }
  ]
}

See more possible JSON configuration options in the examples below

Real-world examples

Express.js using npx arkit

Express architecture graph

Arkit itself using npx arkit and config in package.json

Arkit dependency graph

ReactDOM using npx arkit and config in arkit.json

ReactDOM architecture graph

Vue/Nuxt TodoMVC using yarn arkit -o arkit.svg

Vue and Nuxt dependency graph

Contribution

The tool is under active development, so please feel free to contribute with suggestions and pull requests. Your feedback is priceless.

Relevant projects
  • Dependency cruiser validates and visualizes dependencies
  • Madge generates a visual graph of module dependencies
  • dependo visualizes CommonJS, AMD, or ES6 module dependencies
  • JSCity visualizes JavaScript source code as navigable 3D cities
  • colony in-browser graphs representing the links between your Node.js code and its dependencies
  • TsUML generates UML diagrams from TypeScript source code
Fun stats, stargazers map by worldstar

GitHub stargazer map
Give a Github star to get on the map.

Keywords

FAQs

Package last updated on 21 Apr 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc