一个将 Mermaid Mindmap 格式文本转换为可视化网页布局的单页工具。

• 将缩进文本结构转换为嵌套的 Flexbox 布局
• 支持 H（水平）和 V（垂直）方向控制子元素排列
• 实时预览布局效果
• 纯前端实现，无需服务器

1. 在文本框中输入结构化文本
2. 点击「立即渲染」按钮
3. 查看生成的布局

使用缩进表示层级关系，每个节点可添加 H 或 V 前缀控制其子元素的排列方向：

• H - 子元素水平排列（flex-direction: row）
• V - 子元素垂直排列（flex-direction: column）

html
  H content
    V article
      H subjectwrap
        H subject
          mainpic
          info
        V rating_wrap
          H rating_self
            average
            votes
          V rating_per
            stars5
            stars4
            stars3
            stars2
            stars1
      related_info
    aside

html
└── content (水平)
    ├── article (垂直)
    │   ├── subjectwrap (水平)
    │   │   ├── subject (水平)
    │   │   │   ├── mainpic
    │   │   │   └── info
    │   │   └── rating_wrap (垂直)
    │   │       ├── rating_self (水平)
    │   │       │   ├── average
    │   │       │   └── votes
    │   │       └── rating_per (垂直)
    │   │           ├── stars5
    │   │           ├── stars4
    │   │           ├── stars3
    │   │           ├── stars2
    │   │           └── stars1
    │   └── related_info
    └── aside

直接在浏览器中打开 index.html 即可使用。

# 或使用本地服务器
npx serve .
# python -m http.server 8080

• 快速原型设计网页布局
• 可视化 DOM 结构
• 学习和理解 Flexbox 布局
• 布局结构文档化