用Python+Flask打造可视化武侠人物关系图生成器：从零到一的实战全记录

用Python+Flask打造可视化武侠人物关系图生成器：从零到一的实战全记录

---

一、缘起：一个程序小白的奇妙探索之旅

作为一个接触Python仅13天的编程萌新，我曾以为开发一个完整的应用是遥不可及的事情。但在DeepSeek的帮助下，我竟用短短半天时间完成了一个本地化武侠人物关系图生成器的开发！这个工具不仅能批量管理门派和人物，还能自动生成关系图并导出Excel表格，整个过程充满了挑战与惊喜。

本文将完整记录我的开发过程，手把手带你用Python+Flask实现这个有趣的项目，最终效果如下：

---

二、制作思路：如何化繁为简

核心需求

批量添加门派和人物可视化展示人物关系支持增删改查操作导出结构化数据

技术选型

Flask：轻量级Web框架，快速搭建后端服务Graphviz：专业关系图绘制工具openpyxl：Excel文件生成库HTML+JavaScript：前端交互实现

架构设计

#mermaid-svg-izoTcWH0FTack7Pp {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-izoTcWH0FTack7Pp .error-icon{fill:#552222;}#mermaid-svg-izoTcWH0FTack7Pp .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-izoTcWH0FTack7Pp .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-izoTcWH0FTack7Pp .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-izoTcWH0FTack7Pp .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-izoTcWH0FTack7Pp .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-izoTcWH0FTack7Pp .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-izoTcWH0FTack7Pp .marker{fill:#333333;stroke:#333333;}#mermaid-svg-izoTcWH0FTack7Pp .marker.cross{stroke:#333333;}#mermaid-svg-izoTcWH0FTack7Pp svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-izoTcWH0FTack7Pp .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-izoTcWH0FTack7Pp .cluster-label text{fill:#333;}#mermaid-svg-izoTcWH0FTack7Pp .cluster-label span{color:#333;}#mermaid-svg-izoTcWH0FTack7Pp .label text,#mermaid-svg-izoTcWH0FTack7Pp span{fill:#333;color:#333;}#mermaid-svg-izoTcWH0FTack7Pp .node rect,#mermaid-svg-izoTcWH0FTack7Pp .node circle,#mermaid-svg-izoTcWH0FTack7Pp .node ellipse,#mermaid-svg-izoTcWH0FTack7Pp .node polygon,#mermaid-svg-izoTcWH0FTack7Pp .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-izoTcWH0FTack7Pp .node .label{text-align:center;}#mermaid-svg-izoTcWH0FTack7Pp .node.clickable{cursor:pointer;}#mermaid-svg-izoTcWH0FTack7Pp .arrowheadPath{fill:#333333;}#mermaid-svg-izoTcWH0FTack7Pp .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-izoTcWH0FTack7Pp .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-izoTcWH0FTack7Pp .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-izoTcWH0FTack7Pp .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-izoTcWH0FTack7Pp .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-izoTcWH0FTack7Pp .cluster text{fill:#333;}#mermaid-svg-izoTcWH0FTack7Pp .cluster span{color:#333;}#mermaid-svg-izoTcWH0FTack7Pp div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-izoTcWH0FTack7Pp :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 提交数据 前端界面 Flask后端 数据存储 生成关系图 导出Excel

---

三、准备工作：配置开发环境

基础工具

Python 3.8+VS Code/PyCharm浏览器（推荐Chrome）

安装依赖库

pip install flask graphviz openpyxl

Graphviz安装

Windows：官网下载安装包Mac：brew install graphvizLinux：sudo apt-get install graphviz

---

四、实战开发：七步打造完整系统 步骤1：创建项目结构 📁 Novel-Relationship-Generator ├── 📁 static │ └── 📁 output # 存放生成图片 ├── 📁 templates │ └── index.html # 前端页面 └── app.py # 主程序 步骤2：编写后端核心（app.py） from flask import Flask, render_template, request, jsonify, send_file from graphviz import Digraph import re from openpyxl import Workbook app = Flask(__name__) # 数据存储 characters = [] sects = ["武当派", "少林派", "峨眉派", "嵩山派"] # 初始门派 relations = [] sect_descriptions = { "武当派": "以柔克刚的内家拳法", "少林派": "天下武功出少林", "峨眉派": "女子为主的武林门派", "嵩山派": "五岳剑派之首" } char_descriptions = {} # 此处省略接口代码（与前文相同）... if __name__ == "__main__": app.run(debug=True) 步骤3：前端页面开发（templates/index.html） <!-- 门派添加模块 --> <form id="add-sects-form"> <label>批量添加门派（支持逗号/分号/空格分隔）：</label> <textarea name="sects" rows="3" placeholder="示例：华山派,日月神教"></textarea> <button type="submit">添加门派</button> </form> <!-- 人物关系展示区 --> <div class="right-panel"> <h2>武林门派谱</h2> <div id="characters-list"> <!-- 动态加载门派及人物 --> </div> </div> 步骤4：添加示例数据 # 示例人物数据 characters.extend([ {"name": "张三丰", "sect": "武当派"}, {"name": "宋远桥", "sect": "武当派"}, {"name": "空闻大师", "sect": "少林派"}, {"name": "灭绝师太", "sect": "峨眉派"}, # 可继续添加其他人物... ]) # 示例关系数据 relations.extend([ {"from": "张三丰", "to": "宋远桥", "label": "师徒"}, {"from": "空闻大师", "to": "张三丰", "label": "故交"}, # 添加更多关系... ]) 步骤5：实现关系图生成 @app.route("/generate_graph", methods=["POST"]) def generate_graph(): dot = Digraph(comment="武林关系图") dot.attr(rankdir="LR", nodesep="0.3") # 添加门派分组 for sect in sects: with dot.subgraph(name=f"cluster_{sect}") as sub: sub.attr(label=sect, style="filled", color="lightgrey") for char in characters: if char["sect"] == sect: sub.node(char["name"], shape="box") # 绘制关系线 for rel in relations: dot.edge(rel["from"], rel["to"], label=rel["label"]) dot.render("static/output/relationship.gv", format="png") return jsonify({"status": "success"}) 步骤6：导出Excel功能 @app.route("/export_excel") def export_excel(): wb = Workbook() ws = wb.active ws.append(["序号", "门派", "门派简介", "人物", "人物简介"]) row_num = 1 for sect in sects: desc = sect_descriptions.get(sect, "") members = [c for c in characters if c["sect"] == sect] for i, char in enumerate(members): char_desc = char_descriptions.get(char["name"], "") if i == 0: ws.append([row_num, sect, desc, char["name"], char_desc]) else: ws.append([row_num, sect, "", char["name"], char_desc]) row_num += 1 wb.save("武林人物表.xlsx") return send_file("武林人物表.xlsx") 步骤7：运行与测试 python app.py

访问 http://localhost:5000 即可体验完整功能

---

五、项目亮点总结

便捷操作

批量导入/导出功能节省时间实时可视化反馈

技术融合

前后端分离架构多格式输出支持（PNG/PDF/Excel）

扩展性强

支持自定义样式易于添加新功能模块

---

六、心得体会：新手的编程启示 小步快跑：从简单功能入手，逐步迭代完善善用工具：Graphviz等成熟库能大幅提升效率调试技巧： 使用浏览器开发者工具查看网络请求添加print语句追踪数据流向 文档价值： Flask官方文档Graphviz语法指南

给读者的建议：不要被复杂的功能吓倒，把大问题拆解成小模块逐个击破。就像搭建乐高积木一样，把每个Python功能模块看作一块积木，最终就能拼出完整的作品！

---

立即动手尝试吧！ 基于这个项目还可以拓展思路，比如把做一个日常工作管理的页面等，所以马上行动起来把，你的世界正等待被创造~ 🎉 目前刚开始学编程，并试着在CSDN发表文章，如果需要完整代码，可以在评论区留言并私信我。