AI导哈

架构图生成器

SketchStack是一款AI驱动的架构图生成工具，能够将自然语言描述快速转换为专业的draw.io或手绘风格的Excalidraw图表，适用于系统设计、教学演示和文档生成等多种场景。

  • by harishkotra
  • JavaScript
  • 本地部署
  • 2 星标
  • 更新于
在 GitHub 查看 harishkotra/SketchStack

使用说明

SketchStack ⚡

AI-Powered Architecture Diagram Generator

Turn natural language descriptions into professional draw.io or hand-drawn Excalidraw diagrams in seconds.
Powered by Ollama (Llama 3.2), draw.io MCP Server, and Excalidraw.

🎯 它做什么

  1. 描述 你的系统用简单的英语。
  2. AI提取物 组件、关系、数据流和架构风格。
  3. 图表已生成 以您喜欢的格式：
    • draw.io：带有云图标的专业标准XML。
    • 白板绘图：手绘风格，非常适合绘图和原型制作。
  4. 交互模式：将Excalidraw图表展开到全屏进行拖放编辑。
  5. 精炼 迭代地——“添加缓存”、“使其无服务器化”等。

排除MCP演示

🎨 Excalidraw支持

SketchStack现在支持 白板绘图 对于素描风格的美学。

  • 自动布局：用途 dagre 用于智能分层定位。
  • 交互式：切换全屏以拖动、移动和组织节点。
  • 手绘的：非常适合高级系统设计和白板会议。

📐 建筑

graph LR
    A[User Description] --> B[Ollama LLM]
    B --> C[Zod Validator]
    C --> D[Architecture Agent]
    D --> E{Format Selector}
    E -->|draw.io| F[XML Builder]
    E -->|Excalidraw| G[Excalidraw Builder]
    F --> H[draw.io MCP]
    G --> I[Excalidraw App]

🚀 快速开始

先决条件

  1. Node.js 18+ — 下载
  2. 奥拉玛 — 安装

设置

# 1. Clone this repo
git clone https://github.com/harishkotra/SketchStack SketchStack
cd SketchStack

# 2. Install dependencies
npm install

# 3. Pull an Ollama model
ollama pull llama3.2
# or: ollama pull qwen2.5-coder

# 4. Start Ollama (if not already running)
ollama serve

# 5. Start SketchStack
npm run dev

# 6. Open http://localhost:3000

📖 用例

  • DevRel演示：快速生成博客文章或文档的参考架构。
  • 系统设计访谈：练习设计系统并立即将其可视化。
  • 原型设计：在提交代码之前，集思广益，快速迭代架构想法。
  • 文档：通过描述现有遗留系统来生成起点图。
  • 教学：向学生展示不同组件（负载均衡器、缓存、队列）如何组合在一起。

🌐 公共API

SketchStack公开了一个REST API，您可以在自己的应用程序中使用它。默认情况下，服务器已启用CORS。

端点： POST /api/generate

请求：

{
  "description": "A microservice e-commerce backend with API gateway",
  "cloudProvider": "aws",       // optional: aws, gcp, azure, neutral
  "architectureStyle": "auto"   // optional: microservices, serverless, etc.
}

答复：

{
  "sessionId": "session_123",
  "xml": "<mxGraphModel>...</mxGraphModel>",
  "drawioUrl": "https://app.diagrams.net/...",
  "viewerUrl": "https://viewer.diagrams.net/..."
}

部署

码头工人:

docker build -t sketchstack .
docker run -p 3000:3000 -e OLLAMA_URL=http://host.docker.internal:11434 sketchstack

Vercel/铁路:

  • 这个项目需要一个持久服务器（Node.js）和对Ollama的访问。
  • 对于无服务器部署，您需要一个公共Ollama端点（例如，通过ngrok或托管LLM API）。
  • 集 FORCE_COLOR=1 为了更好的日志可读性。

🧱 项目结构

文件 目的
index.js 快速入口点和CORS配置
config.js 配置（Ollama、布局、CORS）
server/agents/ 用于提取和细化的AI逻辑
server/diagram/ XML构建器、布局引擎、云图标
server/mcp/ draw.io MCP客户端集成
public/ 高级暗模式用户界面

相关 MCP