如何生成带页面链接的精美风格图形？求PlantUML/Mermaid替代方案

一、自定义HTML+CSS+JavaScript（最灵活，完全匹配图中风格） #

这是实现图中效果的最佳方式，能精准控制每个节点的样式和交互：

• 用<a>标签包裹节点内容，直接设置跳转链接
• 通过CSS实现渐变背景、圆角、阴影、hover动效，还原图中的精美质感
• 用Flex/Grid或JS布局库（如D3.js）排列节点

示例代码：

<div class="graph-wrapper">
  <a href="/target-page-1" class="graph-node">节点名称1</a>
  <a href="/target-page-2" class="graph-node">节点名称2</a>
  <a href="/target-page-3" class="graph-node">节点名称3</a>
</div>

<style>
.graph-wrapper {
  display: flex;
  gap: 24px;
  padding: 40px;
  flex-wrap: wrap;
}
.graph-node {
  padding: 18px 32px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  box-shadow: 0 5px 18px rgba(102, 126, 234, 0.4);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}
.graph-node:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6);
}
</style>

二、设计工具实现（适合非开发人员） #

如果不想写代码，可以用设计工具创建带链接的图形：

• Figma：设计节点样式后，给每个节点添加交互跳转链接，导出为HTML文件或直接嵌入网页
• Canva：创建图形元素后，添加可点击链接，导出为支持交互的格式

三、优化Mermaid/PlantUML样式（若坚持用这类工具） #

虽然这类工具默认样式有限，但可以通过自定义配置接近效果：

• Mermaid支持自定义类样式：

  graph LR
    A[首页]:::customNode --> B[产品页]:::customNode
    A --> C[文档页]:::customNode
    classDef customNode fill:#667eea,stroke:#333,stroke-width:2px,rx:12px,ry:12px,color:#fff,font-weight:bold;
  

  再配合页面CSS补充阴影、渐变效果，能一定程度美化
• PlantUML可通过skinparam调整基础样式，但自定义程度远不如HTML/CSS，很难达到图中的精细质感

关于图中工具 #

这类风格的图形没有特定的单一工具，大概率是通过HTML/CSS自定义开发，或是用Figma等设计工具导出的交互式图形。

内容的提问来源于stack exchange，提问作者Martin Heß