arkit

项目介绍：Arkit

Arkit 是一个强大的工具，用于将 JavaScript、TypeScript 和 Flow 等代码库可视化为有意义且可提交的架构图。通过将源码文件与配置的架构组件关联，Arkitektur 能够呈现分组组件和包含 Node.js 模块的依赖关系图，支持 Vue 和 Nuxt 等框架。

功能亮点

• 多种格式的源码支持：不仅支持 JavaScript、TypeScript 和 Flow，还能够处理 Vue/Nuxt 等常见框架的源码。
• 多种输出格式：可以将架构可视化导出为 SVG、PNG 或 PlantUML 图形，以便在需要时共享和管理。
• 灵活的开发集成：轻松集成到开发流中，可用于持续集成工具（CI）、版本控制系统（VCS）、README 和拉取请求（PR）中。

使用方法

用户可以立即运行 Arkit，也可以选择将其添加为项目的开发依赖。执行以下命令，运行 Arkit 并将结果保存为 SVG 格式：

npx arkit src/ -o arkit.svg

也可以自定义源文件和输出格式：

npx arkit -f src/main.js -o puml

对于大型项目，建议按照功能或架构层次逐步生成架构图，以便更好地管理和呈现复杂的依赖关系。

配置选项

Arkit 提供了简单和高级配置选项供用户使用：

• 命令行参数：可以通过指定目录、配置文件、输出路径、以及需要排除的文件模式等命令行参数来进行基础配置。
• 高级配置（例如 arkit.json）：通过 JSON 或 JS 模块配置文件实现更多的自定义功能，如自动补全和验证。

示例如下：

{
  "$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"]
        }
      ]
    }
  ]
}

真实示例

Arkit 已在多个真实世界的项目中使用，证明其有效性和灵活性：

• Express.js 例子：利用 npx arkit 生成的 Express 各个模块架构图。
• Arkit 自身的架构图：通过 npx arkit 和在 package.json 中的配置生成。
• ReactDOM 和 Vue/Nuxt 项目：提供了相应的架构图，展示了对这些框架的广泛支持。

贡献

Arkit 目前处于积极开发中，欢迎任何形式的反馈和贡献。通过提交建议或拉取请求，用户可以帮助 Arkit 变得更加完善。

相关项目

除了 Arkit，还有一些类似的工具可以帮助开发者验证、可视化和管理代码依赖关系，例如 Dependency cruiser、Madge、dependo 等。这些工具各有其强项，开发者可以根据需求选择最合适的工具组合以优化其工作流程。

总之，Arkit 是一个功能强大且灵活的工具，使开发者能够更直观地理解和管理代码库的架构，促进团队协作和代码质量的提高。