Open Arch Flow

OpenArchFlow 的🏗️

AI-Powered AWS Architecture Diagram Generator

Transform natural language into professional cloud architecture diagrams

Features • Getting Started • Tech Stack • Contributing • License

______________________________________________________________________

🌟 概述

OpenArchFlow是一个 开源渐进式Web应用程序 专为云架构师、DevOps工程师和开发人员设计。在几秒钟内从自然语言描述转到正在运行的本地AWS环境——使用AI生成交互式架构图，导出生产就绪的Terraform，以及 直接部署到本地AWS模拟器 无需AWS帐户即可立即进行动手测试。

为什么选择OpenArchFlow？

• ✨ 零设置：不需要帐户。立即开始设计。
• 🔒 隐私第一：完全在浏览器中运行。您的数据永远不会离开您的设备。
• 🎨 AI驱动：用简单的英语描述你的建筑，立即获得专业图表。
• 💰 成本估算：集成AWS定价API，以计算真实世界的架构成本。
• 🔧 完全可编辑：AI生成初始设计，您可以通过拖放对其进行优化。
• 📚 AWS标准：使用AWS文档MCP获取最新的服务建议。
• 🌐 离线功能：本地AI选项（WebLLM）在没有互联网连接的情况下工作。
• 🚀 本地部署：只需单击一下即可将图表部署到本地AWS模拟器（MiniStack），无需云帐户。
• ☁️ 云备份：登录谷歌，将所有图表自动同步到谷歌云端硬盘。

______________________________________________________________________

✨ 特性

🤝 实时P2P协作（新）

• 点对点技术：实时协同设计，实现浏览器间的直接同步。
• 端到端加密（E2EE）：所有数据都使用存储在URL片段中的密钥进行加密(#hash)，其从不发送到信令服务器（零知识）。
• 无中央存储：您的图表永远不会存储在任何中央服务器上。同步通过WebRTC直接在对等体之间进行。
• 现场直播：在工具栏中查看有多少对等体直接连接到您的会话。

☁️ Google帐户和驱动器同步（新）

• 一键登录 --单个Google OAuth弹出窗口授予身份和驱动器访问权限。您的个人资料照片将作为状态按钮显示在工具栏中。
• 自动同步 --每次图表更改都会自动备份到您的个人Google Drive（取消3秒）。只有此应用程序创建的文件才会被访问(drive.file 范围）。
• 冲突解决 --如果云副本在应用程序加载时较新，您可以选择“使用云”或“保持本地”-没有静默覆盖。
• 统一状态 --帐户按钮显示驱动器状态点（绿色/同步/错误）和带有上次同步时间、立即同步和注销操作的弹出窗口。

🤖 多提供商AI引擎

• 云AI（双子座）：从中选择 双子座2.0闪光灯 （最快）， 双子座2.5闪光灯 （平衡、默认），或 双子座2.5 Pro （功能最强）--可直接从AI Provider对话框中选择。
• AWS Bedrock：通过AWS IAM身份中心SSO（设备授权流）进行身份验证——无需手动输入凭据。支持所有基岩模型家族（Claude、Llama、Mistral、Titan、Cohere），每个账户都有动态模型发现。
• 本地人工智能（WebLLM）：注重隐私，通过WebGPU在浏览器中完全运行Phi-3
• 增量生成：AI可以智能地修改和附加到现有的架构图中，而不是从头开始
• 图表聊天：直接从工具栏与AI助手讨论您的架构，以获得解释、定价估算和安全审查

💰 AWS定价和成本估算

• 实时定价：从AWS价目表API获取EC2、RDS、S3、Lambda等的实时数据
• 使用配置：自定义区域、实例类型和使用量（存储GB、请求）以进行精确估计
• 物料清单（BOM）：在专用面板中查看整个架构的综合成本明细
• 导出到CSV：下载建筑方案或预算的成本估算

🚀 MiniStack本地部署（新）

将架构图部署到本地AWS模拟器(MiniStack)继续奔跑 localhost:4566 --将OpenArchFlow转化为完整的 设计→ 部署→ 操作 该平台无需云计算成本，也不需要AWS帐户。

开始：

docker run -p 4566:4566 ministackorg/ministack

然后单击 火箭 工具栏中的图标，配置端点，然后点击 全部部署.

支持的AWS服务：

关键能力：

• 一键部署全部 从MiniStack面板中，实时更新每个节点的状态徽章。
• 每个节点控制台 --单击任何已部署的节点以打开其交互式控制台（S3浏览器、Lambda调用程序、SQS消息读取器等）。
• 模拟混合模式 --当部署节点时，模拟流量被路由到真实的MiniStack资源，并使用挂钟延迟而不是合成值。
• 流量源节点 --从图表画布生成可配置的req/s流量；实时响应图标显示最后结果。
• 浏览器直接 --所有AWS SDK v3调用都直接从浏览器转到 localhost:4566。即使OpenArchFlow托管在Vercel上，也能正常工作。
• 拆除 --在一个操作中删除所有已部署的资源。

🏗️ 地形IaC世代（新）

• HCL代码生成：将您的AWS架构图直接导出为生产就绪的HashiCorp Terraform-- main.tf, variables.tf，以及 outputs.tf 从节点和边生成。
• 60+AWS资源映射：EC2、Lambda、RDS、DynamoDB、S3、VPC、ALB、API网关、CloudFront、EKS、ECS、SQS、SNS、ElastiCache等-通过图边缘进行依赖性推理(depends_on).
• 人工智能增强一代：将Gemini 2.5 Flash与HashiCorp Terraform MCP服务器相结合，生成具有IAM角色和安全组的模式精确的HCL。
• 摩纳哥HCL编辑：完整的HCL语法高亮显示、括号匹配和代码段补全。从编辑器工具栏在暗/亮/自动主题之间切换。
• 每个节点IaC配置：直接从任何AWS节点的属性面板中覆盖资源类型和名称。
• 云不可知架构：可插拔 IaCGenerator 该接口旨在支持未来的CDK、Pulumi或CloudFormation。

🎮 图表模拟和交互性

• 体系结构仿真：播放和模拟数据流和流量模式，以可视化您的架构行为
• 演示工具：内置激光指示器模式，用于向您的团队展示架构

📐 专业图表功能

• 自动布局：使用dagre算法的单击式分层组织
• 海量组件库：AWS、Azure、云原生、可观察性（Datadog、Sentry）、集成（Stripe、Twilio）和通用形状的数百个官方组件
• AWS架构组：VPC、子网、可用区、区域、内部部署和安全区的预置容器——匹配draw.io级解决方案设计能力
• 智能连接：自动边缘布线和标签
• 导出选项：将图表下载为高质量的PNG图像或JSON文件
• 多图支持：创建、管理和备份多个体系结构图
• 导入/导出：单个图表的详细JSON导出或所有工作的完整备份
• 版本控制：向后兼容的文件格式确保您的数据在更新过程中是安全的

📝 人工智能生成的文档

• 技术规格：生成全面的Markdown文档
• 建筑概述：执行摘要和组成部分说明
• 最佳实践：安全性、可扩展性和成本优化建议
• 预览和复制：查看渲染的Markdown或复制原始内容

🎯 用户体验

• 本地优先：所有数据都存储在浏览器的localStorage/IndexedDB中
• 无需后端：100%客户端应用程序
• 响应式设计：适用于台式机和平板电脑设备
• 暗模式支持：具有glassmorphism效果的漂亮UI

______________________________________________________________________

🚀 入门指南

先决条件

• Node.js v25+（推荐）
• pnpm 包管理器

安装

1. 克隆存储库：

   git clone https://github.com/dmux/OpenArchFlow.git
   cd OpenArchFlow

1. 安装依赖项：

   pnpm install

1. 设置环境变量（Cloud AI可选）：

创建一个 .env.local 文件：

   cp .env.example .env.local

添加您的Gemini API密钥（仅用于云AI）：

   GEMINI_API_KEY=your_gemini_api_key_here
   UPSTASH_REDIS_REST_URL=your_upstash_url (optional, for rate limiting)
   UPSTASH_REDIS_REST_TOKEN=your_upstash_token (optional)

> 备注：您可以在没有任何API密钥的情况下使用本地AI（WebLLM）！

1. 运行开发服务器：

   pnpm dev

打开 http://localhost:3000 开始创建图表！

为生产而建

pnpm build
pnpm start

______________________________________________________________________

🛠️ 技术栈

______________________________________________________________________

📖 如何使用

1.用AI生成图表

1. 选择 云AI （双子座）或 本地AI （Phi-3）
2. 键入您的架构描述：

   Serverless API with Lambda, API Gateway, DynamoDB, and S3

1. 按Enter键，观看您的图表显示！

2.组织布局

• 点击 行动 → 自动布局 自动排列组件
• 拖放节点以自定义位置
• 通过拖动边连接组件

3.生成文档

• 点击 行动 → 生成规范
• 查看渲染的Markdown或原始代码
• 复制到剪贴板以保存您的wiki/文档

4.使用谷歌登录（可选）

1. 点击 云/帐户图标 在工具栏中
2. 完成谷歌登录弹出窗口——一步授予身份和驱动器访问权限
3. 您的个人资料照片将替换图标；从现在开始，图表自动同步到驱动器

5.实时协作

1. 点击 用户 工具栏中的图标
2. 点击 开始合作
3. 与您的团队共享生成的链接（E2EE）
4. 观看所有屏幕上的即时更新！

6.部署到本地AWS（MiniStack）

1. 启动MiniStack： docker run -p 4566:4566 ministackorg/ministack
2. 点击 🚀 火箭 工具栏中的图标
3. 点击 测试连接 --您应该看到“已连接”
4. 点击 全部部署 --节点按顺序部署，带有实时状态徽章
5. 单击任何已部署的节点→ 打开控制台 与资源交互
6. 运行模拟——部署的节点从模拟引擎接收真实流量

7.导出图表

• 点击 行动 → 导出为PNG
• 下载用于演示的专业图表

8.管理图表（导入/导出）

• 出口单：单击下载图标(⬇️) 在侧边栏中的图表旁边，将其另存为JSON文件。
• 全部备份：单击 全部备份 在侧边栏页脚中，一次导出所有图表。
• 导入：单击 导入 从JSON文件还原图表。

- 自动处理版本控制 - 安全地与现有图表合并（重命名重复项）

______________________________________________________________________

🔖 版本控制

OpenArchFlow如下 语义版本控制 (MAJOR.MINOR.PATCH):

所有显著变化均记录在 更改日志.md，继 保存变更日志 格式。

如何发布新版本

1. 更新 package.json --撞到 "version" 领域
2. 更新 CHANGELOG.md --从以下位置移动项目 [Unreleased] 到一个新的日期部分
3. 提交 发布：

   git add package.json CHANGELOG.md
   git commit -m "chore: release vX.Y.Z"

1. 标签 发布：

   git tag -a vX.Y.Z -m "Release vX.Y.Z"
   git push && git push --tags

该版本在构建时通过以下方式自动注入UI NEXT_PUBLIC_APP_VERSION --不需要手动更新UI。

______________________________________________________________________

🤝 贡献

我们欢迎社区的贡献！OpenArchFlow已构建 由建筑师和工程师为建筑师和工程师.

如何做出贡献

1. 分叉存储库
2. 创建要素分支: git checkout -b feature/amazing-feature
3. 提交您的更改: git commit -m 'Add amazing feature'
4. 推到分支: git push origin feature/amazing-feature
5. 打开拉取请求

开发指南

• 在下面写下清晰、描述性的提交消息 约定式提交 (feat:, fix:, chore:, docs:)
• 遵循现有的代码风格（TypeScript+ESLint）
• 彻底测试您的更改
• 更新 CHANGELOG.md 在...之下 [Unreleased] 对于任何用户可见的更改
• 将版本插入 package.json 提交发布PR时

贡献的想法

• 🆕 添加更多AWS服务（AppSync、EKS、ECS等）
• 🎨 改进UI/UX设计
• 🌍 添加国际化（i18n）
• 📱 移动设备支持
• 🧪 添加单元和集成测试
• 📚 改进AI提示以获得更好的图表

______________________________________________________________________

🔐 隐私和安全

您的隐私是我们的首要任务：

• ✅ 无数据收集：我们不收集任何个人数据、图表或API密钥
• ✅ 仅限本地存储：您的所有工作都保留在设备上
• ✅ 没有追踪：无分析、无Cookie、无遥测
• ✅ 开源：整个代码库可供检查
• ✅ 可选云AI：使用本地AI实现完全离线隐私

______________________________________________________________________

📄 许可证

该项目是开源的，可在 MIT许可证.

______________________________________________________________________

👨‍💻 作者

拉斐尔销售\ 📧 rafael.sales@gmail.com\ 🌐 rfsales.dev\ 🐙

______________________________________________________________________

⭐ 表示支持

如果你觉得OpenArchFlow有用，请考虑：

• ⭐ 对存储库进行标记
• 🐛 通过以下方式报告错误或建议功能 问题
• 🤝 为项目做出贡献
• 📢 与您的网络共享

______________________________________________________________________

🙏 致谢

建于❤️ 由开发人员和架构师社区为社区服务。

特别感谢：

• AWS提供全面的文档和服务图标
• Google Gemini具备强大的人工智能功能
• WebLLM团队实现本地AI推理
• 令人惊叹的工具和库的开源社区

______________________________________________________________________

Made with ☕ and 💻 for Cloud Architects