Workflow

1. 提取出核心架构

Task: Extract Architecture Diagram to JSON

Please carefully analyze the current project. Based on your deep research, generate a detailed architecture diagram.

Expected JSON Structure

{
  "diagram": {
    "title": "string",
    "layers": [
      {
        "id": "string",
        "name": "string",
        "level": number,
        "components": [
          {
            "id": "string",
            "name": "string",
            "type": "string",
            "module": "string (optional)",
            "provider": "string (optional)",
            "dependencies": ["string array (optional)"],
            "contains": [/* nested components - MAX 3-4 LEVELS */]
          }
        ]
      }
    ],
    "relationships": [
      {
        "from": "component-id",
        "to": "component-id",
        "type": "calls | uses | depends-on | integrates-with | supports"
      }
    ]
  }
}

Extraction Rules

1. Identify Layers (Horizontal Sections)

   • Look for dashed boxes that group components horizontally
   • Each layer has a name (usually on the left with an icon)
   • Assign level: 1 (top) → 2 (middle) → 3 (bottom)

2. Extract Components

   • Component name: Bold text inside boxes
   • Component type: Text in parentheses below name (e.g., "ui-module", "framework")
   • For nested components (like Tools containing multiple tools), use the contains array
   • IMPORTANT: Maximum nesting depth is 3-4 levels
   • Generate kebab-case IDs from component names

3. Nesting Structure Guidelines

   • Level 1: Layer (e.g., "Console UI", "Agentic System")
   • Level 2: Major component (e.g., "Components", "Tools")
   • Level 3: Sub-component (e.g., "File System Toolset", "Text Editor Tool")
   • Level 4 (if needed): Detailed sub-item (e.g., specific tool functions)
   • Stop at level 4 - do not nest deeper

4. Identify Relationships

   • Arrows between components indicate relationships
   • Bidirectional arrows (↔) = "integrates-with"
   • Downward arrows (↓) = "depends-on"
   • Arrows pointing to specific components = "calls" or "uses"

5. Special Cases

   • If a component contains a list of items (like "Tools" containing "File System Toolset", "Text Editor Tool", etc.), put them in the contains array
   • Keep the exact naming from the diagram
   • For module names in parentheses, add them as a module field
   • If you encounter deeper nesting in the diagram, flatten it to maximum 4 levels

Example Nesting

{
  "layers": [                           // Level 1
    {
      "components": [                   // Level 2
        {
          "id": "tools",
          "name": "Tools",
          "contains": [                 // Level 3
            {
              "id": "filesystem-tool",
              "name": "File System Toolset",
              "contains": [             // Level 4 (MAX)
                {
                  "id": "read-file",
                  "name": "Read File"
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}

Output

Please provide:

1. The complete JSON structure (respecting max 3-4 level nesting)
2. Reference documents are under doc folder and README.md if exists
3. A brief summary of:
   • Layer count
   • Component count
   • Maximum nesting depth used
   • Relationship count
4. If you had to flatten any structure, mention what was simplified

2. 审查并修改

一次性列出所有修改 OR 渐进式修改

3. 渐进式修改

Generate Architecture Diagram Prompts

Generate a modern but minimalist style Architecture Diagram for DeerCode.

{
  "name": "DeerCode",
  "description": "DeerCode Architecture",
  "layers": [
    {
      "name": "Console UI",
      "type": "presentation",
      "components": [
        {
          "name": "App",
          "type": "ui-module"
        },
        {
          "name": "Theme",
          "type": "ui-module"
        },
        {
          "name": "Components",
          "type": "ui-module"
        }
      ]
    },
    {
      "name": "Agentic System",
      "type": "core",
      "components": [
        {
          "name": "Coding Agent",
          "type": "agent",
          "icon": "robot"
        },
        {
          "name": "Prompt Template",
          "type": "template",
          "icon": "template"
        },
        {
          "name": "Models",
          "type": "model-layer",
          "models": [
            {
              "name": "Doubao Seed 1.6",
              "provider": "bytedance"
            }
          ]
        },
        {
          "name": "Tools",
          "type": "tool-layer",
          "tools": [
            {
              "name": "File System Toolset",
              "category": "filesystem"
            },
            {
              "name": "Text Editor Tool",
              "category": "editor"
            },
            {
              "name": "Bash Tool",
              "category": "command"
            },
            {
              "name": "To-do List Tool",
              "category": "task"
            },
            {
              "name": "MCP Tool Loader",
              "category": "extension"
            }
          ]
        }
      ]
    },
    {
      "name": "Infrastructure",
      "type": "foundation",
      "components": [
        {
          "name": "LangChain",
          "type": "framework"
        },
        {
          "name": "LangGraph",
          "type": "framework"
        },
        {
          "name": "Textual UI",
          "type": "ui-framework"
        },
        {
          "name": "Rich UI",
          "type": "ui-framework"
        },
        {
          "name": "Config",
          "type": "configuration"
        }
      ]
    }
  ]
}

4. 尝试不同风格

你可以修改 Prompt 中的关键词，比如将“minimalist style and professional”替换为任何你想要的风格，中英文混合也可以：

Bonus Step. 风格迁移

如果你在手边已经找到了喜欢的参考图，那么恭喜你，你可以做风格迁移了！ 风格迁移的方式非常简单，新起一个对话，只需要同时将上述 Prompt 和你喜欢的图片发给 AI 工具，并且说：

Generate architecture diagram, try your best to keep the style consistency of [image 1]:

// 你的架构 JSON 表达式

我们学习到的

• 用 JSON 来写 Prompt

• 架构即代码

• 内容与样式分离

• 自动化：可编程的架构图

  # 自动化脚本示例
  import json
  
  # 从代码仓库提取架构
  architecture = extract_from_repo("./src")
  
  # 应用团队标准样式
  style = load_style("company-standard.json")
  
  # 批量生成
  for format in ["16:9", "4:3", "1:1"]:
      generate_diagram(architecture, style, format)