Graph-Easy动画支持与MediaWiki集成在Wiki页面嵌入动态流程图【免费下载链接】Graph-EasyConvert or render graphs (as ASCII, HTML, SVG or via Graphviz)项目地址: https://gitcode.com/gh_mirrors/gr/Graph-EasyGraph-Easy是一款 Perl 图渲染引擎能将简单的文本描述转换为 HTML、SVG、ASCII 等多种格式并通过内置的output属性与MediaWiki深度集成让 Wiki 页面直接展示可交互的动态流程图。本文带你快速完成从零到在 Wiki 里画出流程图的全过程。 Graph-Easy 能做什么Graph-Easy 用极简语法描述图结构例如[ Bonn ] - [ Berlin ] [ Berlin ] - [ Frankfurt ] { border: 1px dotted black; } [ Frankfurt ] - [ Dresden ]经过自动布局引擎处理后可输出为HTML 表格 CSS、SVG 矢量图、ASCII 字符画或Graphviz DOT四种形式。其中 HTML 和 SVG 输出天然运行在浏览器中支持 CSS 悬停、过渡、缩放等动态效果——这就是动态流程图的核心来源。核心渲染逻辑位于 lib/Graph/Easy.pmoutput()方法会根据图中声明的格式自动调用对应的渲染器。 MediaWiki 集成output属性是关键Graph-Easy 为 MediaWiki 环境预留了一个专用属性output它在图定义中声明期望的输出格式graph { output: html; } [ 需求分析 ] - [ 架构设计 ] - [ 编码实现 ]在 lib/Graph/Easy/Attributes.pm 中可以看到output支持以下格式格式值说明适用场景html生成 HTML 表格 CSSWiki 页面内嵌推荐svg生成 SVG 矢量图需要无损缩放时ascii字符画终端 / 纯文本graphvizDOT 格式交给dot二次渲染boxart增强字符画终端美化debug调试信息开发排错MediaWiki 端的mediawiki-graph扩展在解析模板时会读取该属性并调用Graph::Easy::output()将结果直接插入页面——无需手动导出图片。 三步在 Wiki 中嵌入动态流程图第 1 步安装 Graph-Easygit clone https://gitcode.com/gh_mirrors/gr/Graph-Easy cd Graph-Easy perl Makefile.PL make make install第 2 步编写图文本创建一个.txt文件使用 Graph-Easy 文本语法graph { label: 部署流水线; output: html; node { shape: rounded; } edge { arrowstyle: filled; } } [ 代码提交 ] -- { border: 1px solid #4CAF50; } [ CI 构建 ] [ CI 构建 ] -- [ 自动化测试 ] [ 自动化测试 ] -- [ 部署到生产 ]第 3 步渲染并嵌入 Wiki方式 A命令行直接生成 HTML 片段perl -Ilib examples/as_html my_graph.txt将输出的 HTML 代码粘贴到 Wiki 页面的pre或源码模式即可。完整示例可参考 examples/as_html 脚本。方式 B通过 MediaWiki 模板推荐在 Wiki 页面中使用模板调用{{#invoke:graph-easy|render| [ 代码提交 ] -- [ CI 构建 ] [ CI 构建 ] -- [ 部署到生产 ] }}模板内部调用Graph::Easy::Parser解析文本再经output()方法按output属性渲染。解析器实现在 lib/Graph/Easy/Parser.pm。 让流程图动起来CSS 与 SVG 技巧HTML 输出本质是tablestyle组合你可以在此基础上追加 CSS 动画table.graph td { transition: background-color 0.3s, transform 0.2s; } table.graph td:hover { background-color: #e3f2fd; transform: scale(1.05); }SVG 输出则支持animate和animateTransform等原生 SMIL 动画标签可实现箭头流动、节点脉冲等效果。SVG 渲染器位于 lib/Graph/Easy/As_graphviz.pm经 Graphviz 后端或直接通过as_svg方法生成。提示examples/as_svg演示了完整的 SVG 输出流程可作为动画改造的起点。️ 进阶用 wikicrawl 从 Wiki 自动生成关系图项目附带了一个极具创意的示例脚本 examples/wikicrawl.pl它能抓取指定 Wikipedia 页面及其链接将文章 → 被链接文章关系转化为 Graph-Easy 图按链接深度着色越深层颜色越暖输出.txt图描述 .png渲染结果perl examples/wikicrawl.pl --langde --rootBerlin --maxdepth3这展示了 Graph-Easy 在从 Wiki 提取图 → 渲染回 Wiki闭环中的完整能力。 关键文件速查文件作用lib/Graph/Easy.pm核心模块output()总入口lib/Graph/Easy/Attributes.pmoutput属性定义与文档lib/Graph/Easy/Parser.pm文本语法解析器examples/as_htmlHTML 输出示例脚本examples/as_svgSVG 输出示例脚本examples/wikicrawl.plWiki 爬取生成图examples/html.pl完整 HTML 页面生成示例README项目总览与安装说明✅ 常见问题QWiki 页面里 HTML 被过滤了怎么办AMediaWiki 默认会转义table等标签。需在LocalSettings.php中注册mediawiki-graph扩展或在模板层通过wfLoadExtension允许内联 HTML。Q节点太多导致布局缓慢A在graph {}中设置timeout: 120;限制布局时间或减少边数量。布局引擎在 lib/Graph/Easy/Layout/ 下提供 Grid、Force、Path 等多种策略可选。Q能否输出 Boxart 风格的字符动画A可以。output: boxart;生成带 Unicode 框线字符的增强 ASCII 图配合 Wiki 的pre标签展示适合纯文本环境。Graph-Easy 让画流程图这件事从打开绘图软件退化为写一行文本。而output属性 MediaWiki 模板的组合则让这份文本直接在 Wiki 页面中活起来——无需图片文件无需额外依赖一条命令一个模板流程图就嵌好了。【免费下载链接】Graph-EasyConvert or render graphs (as ASCII, HTML, SVG or via Graphviz)项目地址: https://gitcode.com/gh_mirrors/gr/Graph-Easy创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考