Excalidraw支持Serverless函数拓扑

最新推荐文章于 2025-12-20 15:28:56 发布

原创最新推荐文章于 2025-12-20 15:28:56 发布 · 972 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#Excalidraw #Serverless #可视化

部署运行你感兴趣的模型镜像

Excalidraw 支持 Serverless 函数拓扑的深度实践

在今天的云原生开发中，一个让人头疼的问题是：系统明明部署成功了，但没人说得清函数之间到底是怎么调用的。

我们见过太多这样的场景——新成员入职，面对一堆 Lambda 函数和事件源只能靠猜；线上出问题时，排查路径像解谜游戏；架构评审会上，PPT 里的静态框图早已和实际部署脱节。Serverless 架构虽然带来了极致弹性与低成本，却也把调用关系变得越来越“隐形”。

就在这时，Excalidraw 悄然完成了一次关键进化：它不再只是一个画手绘风格草图的白板工具，而是通过插件机制与数据集成能力，开始支持 Serverless 函数拓扑的可视化建模。更准确地说，它正在成为连接代码、架构与团队认知之间的“视觉翻译器”。

为什么是 Excalidraw？

你可能会问，画个架构图而已，Draw.io 不行吗？Figma 呢？甚至 PPT 都能搞定。

但如果你真正维护过大型 Serverless 应用，就会明白几个核心痛点：

图表更新滞后于代码变更
团队协作时版本混乱
抽象的函数依赖难以直观表达
运维、开发、产品对同一系统的理解不一致

而 Excalidraw 的特别之处在于，它既保留了“随手涂鸦”的亲和力，又具备足够的技术深度去承载真实工程数据。它的手绘风格降低了正式感带来的压迫性，让非技术人员也能轻松参与讨论；同时其开放的数据模型和插件系统，使得自动化生成、元数据绑定、外部系统集成成为可能。

换句话说，它既是白板，也是 API。

如何让函数“长”成一张图？

想象这样一个流程：你刚提交了一段 Terraform 配置，定义了一个新的 S3 触发 Lambda，并将其接入 SQS 队列。CI 流水线运行完毕后，不仅完成了部署，还自动生成了一张可交互的拓扑图，发布到团队 Wiki 上。

这张图不是截图，而是可以直接点击节点查看函数配置、追踪调用链、甚至跳转到源码仓库的动态视图。而这正是 Excalidraw 结合 IaC 工具链所能实现的能力。

整个过程可以拆解为四个阶段：

从基础设施代码中提取结构信息
将函数与事件映射为图的节点与边
生成符合 Excalidraw 数据格式的元素集合
自动布局并注入编辑器进行展示或导出

比如，我们可以写一个简单的解析脚本，从 terraform.tfstate 文件中抓取关键资源：

# 伪代码：从 Terraform 状态文件提取函数与触发关系
def parse_terraform_state(tfstate_path):
    functions = {}
    triggers = []

    for resource in state["resources"]:
        if resource["type"] == "aws_lambda_function":
            name = resource["instances"][0]["attributes"]["function_name"]
            arn = resource["instances"][0]["attributes"]["arn"]
            functions[arn] = name

        elif resource["type"] == "aws_lambda_permission":
            function_arn = resource["instances"][0]["attributes"]["function_arn"]
            principal = resource["instances"][0]["attributes"]["principal"]

            if "apigateway" in principal:
                triggers.append(("API Gateway", None, function_arn))
            elif "s3.amazonaws.com" in principal:
                bucket = source_arn.split(":")[-1].split("/")[0]
                triggers.append((f"S3:{bucket}", None, function_arn))

这段逻辑并不复杂，但它完成了从“声明式配置”到“可视化语义”的第一步转换。接下来，这些数据就可以被送入一个生成器，转化为 Excalidraw 可识别的元素对象。

// 创建表示函数的矩形节点
function createFunctionNode(name: string, x: number, y: number): ExcalidrawElement {
  return {
    type: "rectangle",
    id: `fn-${name}`,
    x,
    y,
    width: 120,
    height: 60,
    strokeColor: "#1e88e5",
    backgroundColor: "#bbdefb",
    label: {
      text: name,
      fontSize: 16,
      textAlign: "center",
      verticalAlign: "middle"
    },
    // ...其他样式属性
  };
}

// 创建调用箭头
function createCallEdge(fromId: string, toId: string): ExcalidrawElement {
  return {
    type: "arrow",
    id: `edge-${fromId}-to-${toId}`,
    fromId,
    toId,
    strokeColor: "#000",
    endArrowhead: "arrow",
    points: [[0, 0], [80, 40]]
  };
}

这些元素最终会被组合成一个完整的场景 JSON，直接导入 Excalidraw 编辑器。更重要的是，每个图形都可以附加自定义元数据，例如函数内存大小、超时时间、权限角色等，形成一种“富文档”体验。

自动化才是终极答案

手动画图永远追不上变化的速度。真正的价值来自于将这个过程嵌入 CI/CD 流水线。

设想一下你的 GitHub Action 工作流：

on: [push]

jobs:
  generate-diagram:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - run: terraform init && terraform plan -out=tfplan
      - run: python extract_functions.py tfplan > functions.json
      - run: node generate-excalidraw.js functions.json > diagram.excalidraw
      - uses: actions/upload-artifact@v3
        with:
          name: architecture-diagram
          path: diagram.excalidraw

每次代码合并后，系统都会自动生成最新的 .excalidraw 文件，并可通过预览链接分享给团队。结合 Excalidraw 的实时协作功能，多人还能在同一画布上标注优化建议，真正实现“架构共写”。

这不仅仅是省去了画图的时间，更重要的是建立了 架构一致性保障机制 —— 文档不再是事后的补充，而是部署结果的一部分。