System viz generator

Describe CPU / memory / stack / heap in JSON, render SVG instantly

Generate consistent system diagrams for blogs, slides, and videos. Schema-driven, AI-writable.

Use cases

· Memory snapshots for algorithms
· Recursion call-stack figures
· Pointer / reference diagrams
· Operating-systems lesson visuals

示例

JSON 输入

{
  "version": "1",
  "meta": {
    "title": "递归 factorial(3) 调用栈",
    "subtitle": "栈帧从底部 main() 向上压入,直到 base case"
  },
  "stack": {
    "frames": [
      {
        "id": "main",
        "function": "main()",
        "locals": [
          {
            "name": "result",
            "type": "int",
            "value": {
              "kind": "literal",
              "text": "?"
            }
          }
        ]
      },
      {
        "id": "fact3",
        "function": "factorial(3)",
        "locals": [
          {
            "name": "n",
            "type": "int",
            "value": {
              "kind": "literal",
              "text": "3"
            }
          }
        ]
      },
      {
        "id": "fact2",
        "function": "factorial(2)",
        "locals": [
          {
            "name": "n",
            "type": "int",
            "value": {
              "kind": "literal",
              "text": "2"
            }
          }
        ]
      },
      {
        "id": "fact1",
        "function": "factorial(1)",
        "locals": [
          {
            "name": "n",
            "type": "int",
            "value": {
              "kind": "literal",
              "text": "1"
            }
          }
        ],
        "highlight": true,
        "note": "base case"
      }
    ]
  },
  "annotations": [
    {
      "target": "frame:fact1",
      "text": "n==1 触发 base case,准备返回 1",
      "kind": "current"
    }
  ]
}

质量检查

栈帧4堆对象0寄存器0段0指针0高亮1注释1

结构 + 可读性检查全通过

AI 知识点审稿(可选)

点击右上「AI 知识点审稿」会调用 LLM 检查图中知识点(如递归是否有 base case、链表是否 nil 终止、指针语义是否合理)。需在 .env.local 配置OPENAI_API_KEY(可选 OPENAI_BASE_URL 指向 Doubao 等兼容端点)。

预览

指针引用语法:frame:<id>.locals.<name>或heap:<id>.fields.<name>,目标可写heap:<id>。

How it works

1 · Schema

A Scene has cpu / memory / stack / heap / pointers / annotations. Version-locked, partial-friendly.

2 · Layout

Fixed regions, intra-region flow layout, anchors computed from frame/heap/reg ids.

3 · Render

Pure-functional React SVG. Server-rendered, embeddable anywhere.