高级预览Live previewExportDeveloper tool

GitHub Actions 工作流图

将 GitHub Actions YAML 中的 jobs、needs、steps 转换为可读工作流图。

示例

Detected YAML

This input may work better in the matching tool. Open YAML tool

Workflow YAML

预览结果就绪

预览结果会显示在这里。

下一步可以继续

把当前预览结果带到相关工具里继续转换、排查或导出。

AI 图表生成器

用自然语言生成可编辑 Mermaid 图表，并在导出前完成预览和 review。

打开

Mermaid AI 修复器

用 AI 修复 Mermaid 语法错误，并在发布前检查图表语义和可读性。

打开

架构图生成器

用 AI 从产品或系统说明生成 Mermaid 架构图。

打开

使用方法

1粘贴 GitHub Actions workflow YAML。
2检查触发器、job 依赖、matrix 和部署 gate。
3合并前 review permissions、secrets、pull_request_target 和 shell 命令。
4导出图用于 CI/CD 文档或发布 runbook。

常见场景

CI/CD workflow reviewGitHub Actions onboarding部署 gate 文档发布流水线图Workflow 安全 review

常见问题

合并 workflow YAML 前应该检查什么？

检查 permissions、触发器、secrets、部署环境、job 依赖，以及是否有下载远程代码的脚本。

为什么要可视化 GitHub Actions？

job 顺序和部署 gate 用图比长 YAML 更容易 review，尤其是 needs 和 matrix 较多时。

它能校验 workflow 吗？

不能。运行时校验仍靠 GitHub Actions，本工具用于预览、文档和 review。

GitHub Actions Workflow Diagram 会把 workflow YAML 中的 jobs、needs、触发器和关键步骤转成可读 CI/CD 图。

它帮助 reviewer 不用逐行扫描长 YAML，也能理解 build、test、deploy、release 的顺序。

图里也适合提示缺失 permissions、过宽触发器、secret 使用和危险 shell 安装模式。

Demo：review build-test-deploy 工作流

Workflow 图应该让依赖和部署 gate 一眼可见，也能帮助发现权限过宽或 secrets 过早暴露。

deploy job 应通过 needs 依赖 test job。
在 workflow 或 job 层设置最小 permissions。
生产部署使用 environments 做审批和保护。

name: CI
on: [push, pull_request]
permissions:
  contents: read
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm test
  deploy:
    needs: test
    environment: production
    runs-on: ubuntu-latest
    steps:
      - run: ./deploy.sh

调试方法：找出 CI 里的慢路径和风险路径

Workflow 图最有价值的地方是展示依赖、条件、环境和人工审批。这样能快速看出哪些 job 阻塞发布，哪些 job 权限过宽。

沿着 needs 关系找到真正的关键路径。
生产发布要把 branch、environment、approval 一起画出来。
把 permissions 和 secrets 使用情况放在 job 图旁边 review。

jobs:
  test:
    runs-on: ubuntu-latest
  deploy:
    needs: test
    if: github.ref == 'refs/heads/main'
    environment: production