Graph-Easy動(dòng)畫(huà)支持與MediaWiki集成在Wiki頁(yè)面嵌入動(dòng)態(tài)流程圖【免費(fèi)下載鏈接】Graph-EasyConvert or render graphs (as ASCII, HTML, SVG or via Graphviz)項(xiàng)目地址: https://gitcode.com/gh_mirrors/gr/Graph-EasyGraph-Easy是一款 Perl 圖渲染引擎能將簡(jiǎn)單的文本描述轉(zhuǎn)換為 HTML、SVG、ASCII 等多種格式并通過(guò)內(nèi)置的output屬性與MediaWiki深度集成讓 Wiki 頁(yè)面直接展示可交互的動(dòng)態(tài)流程圖。本文帶你快速完成從零到在 Wiki 里畫(huà)出流程圖的全過(guò)程。 Graph-Easy 能做什么Graph-Easy 用極簡(jiǎn)語(yǔ)法描述圖結(jié)構(gòu)例如[ Bonn ] - [ Berlin ] [ Berlin ] - [ Frankfurt ] { border: 1px dotted black; } [ Frankfurt ] - [ Dresden ]經(jīng)過(guò)自動(dòng)布局引擎處理后可輸出為HTML 表格 CSS、SVG 矢量圖、ASCII 字符畫(huà)或Graphviz DOT四種形式。其中 HTML 和 SVG 輸出天然運(yùn)行在瀏覽器中支持 CSS 懸停、過(guò)渡、縮放等動(dòng)態(tài)效果——這就是動(dòng)態(tài)流程圖的核心來(lái)源。核心渲染邏輯位于 lib/Graph/Easy.pmoutput()方法會(huì)根據(jù)圖中聲明的格式自動(dòng)調(diào)用對(duì)應(yīng)的渲染器。 MediaWiki 集成output屬性是關(guān)鍵Graph-Easy 為 MediaWiki 環(huán)境預(yù)留了一個(gè)專用屬性output它在圖定義中聲明期望的輸出格式graph { output: html; } [ 需求分析 ] - [ 架構(gòu)設(shè)計(jì) ] - [ 編碼實(shí)現(xiàn) ]在 lib/Graph/Easy/Attributes.pm 中可以看到output支持以下格式格式值說(shuō)明適用場(chǎng)景html生成 HTML 表格 CSSWiki 頁(yè)面內(nèi)嵌推薦svg生成 SVG 矢量圖需要無(wú)損縮放時(shí)ascii字符畫(huà)終端 / 純文本graphvizDOT 格式交給dot二次渲染boxart增強(qiáng)字符畫(huà)終端美化debug調(diào)試信息開(kāi)發(fā)排錯(cuò)MediaWiki 端的mediawiki-graph擴(kuò)展在解析模板時(shí)會(huì)讀取該屬性并調(diào)用Graph::Easy::output()將結(jié)果直接插入頁(yè)面——無(wú)需手動(dòng)導(dǎo)出圖片。 三步在 Wiki 中嵌入動(dòng)態(tài)流程圖第 1 步安裝 Graph-Easygit clone https://gitcode.com/gh_mirrors/gr/Graph-Easy cd Graph-Easy perl Makefile.PL make make install第 2 步編寫(xiě)圖文本創(chuàng)建一個(gè).txt文件使用 Graph-Easy 文本語(yǔ)法graph { label: 部署流水線; output: html; node { shape: rounded; } edge { arrowstyle: filled; } } [ 代碼提交 ] -- { border: 1px solid #4CAF50; } [ CI 構(gòu)建 ] [ CI 構(gòu)建 ] -- [ 自動(dòng)化測(cè)試 ] [ 自動(dòng)化測(cè)試 ] -- [ 部署到生產(chǎn) ]第 3 步渲染并嵌入 Wiki方式 A命令行直接生成 HTML 片段perl -Ilib examples/as_html my_graph.txt將輸出的 HTML 代碼粘貼到 Wiki 頁(yè)面的pre或源碼模式即可。完整示例可參考 examples/as_html 腳本。方式 B通過(guò) MediaWiki 模板推薦在 Wiki 頁(yè)面中使用模板調(diào)用{{#invoke:graph-easy|render| [ 代碼提交 ] -- [ CI 構(gòu)建 ] [ CI 構(gòu)建 ] -- [ 部署到生產(chǎn) ] }}模板內(nèi)部調(diào)用Graph::Easy::Parser解析文本再經(jīng)output()方法按output屬性渲染。解析器實(shí)現(xiàn)在 lib/Graph/Easy/Parser.pm。 讓流程圖動(dòng)起來(lái)CSS 與 SVG 技巧HTML 輸出本質(zhì)是tablestyle組合你可以在此基礎(chǔ)上追加 CSS 動(dòng)畫(huà)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 動(dòng)畫(huà)標(biāo)簽可實(shí)現(xiàn)箭頭流動(dòng)、節(jié)點(diǎn)脈沖等效果。SVG 渲染器位于 lib/Graph/Easy/As_graphviz.pm經(jīng) Graphviz 后端或直接通過(guò)as_svg方法生成。提示examples/as_svg演示了完整的 SVG 輸出流程可作為動(dòng)畫(huà)改造的起點(diǎn)。? 進(jìn)階用 wikicrawl 從 Wiki 自動(dòng)生成關(guān)系圖項(xiàng)目附帶了一個(gè)極具創(chuàng)意的示例腳本 examples/wikicrawl.pl它能抓取指定 Wikipedia 頁(yè)面及其鏈接將文章 → 被鏈接文章關(guān)系轉(zhuǎn)化為 Graph-Easy 圖按鏈接深度著色越深層顏色越暖輸出.txt圖描述 .png渲染結(jié)果perl examples/wikicrawl.pl --langde --rootBerlin --maxdepth3這展示了 Graph-Easy 在從 Wiki 提取圖 → 渲染回 Wiki閉環(huán)中的完整能力。 關(guān)鍵文件速查文件作用lib/Graph/Easy.pm核心模塊output()總?cè)肟趌ib/Graph/Easy/Attributes.pmoutput屬性定義與文檔lib/Graph/Easy/Parser.pm文本語(yǔ)法解析器examples/as_htmlHTML 輸出示例腳本examples/as_svgSVG 輸出示例腳本examples/wikicrawl.plWiki 爬取生成圖examples/html.pl完整 HTML 頁(yè)面生成示例README項(xiàng)目總覽與安裝說(shuō)明? 常見(jiàn)問(wèn)題QWiki 頁(yè)面里 HTML 被過(guò)濾了怎么辦AMediaWiki 默認(rèn)會(huì)轉(zhuǎn)義table等標(biāo)簽。需在LocalSettings.php中注冊(cè)mediawiki-graph擴(kuò)展或在模板層通過(guò)wfLoadExtension允許內(nèi)聯(lián) HTML。Q節(jié)點(diǎn)太多導(dǎo)致布局緩慢A在graph {}中設(shè)置timeout: 120;限制布局時(shí)間或減少邊數(shù)量。布局引擎在 lib/Graph/Easy/Layout/ 下提供 Grid、Force、Path 等多種策略可選。Q能否輸出 Boxart 風(fēng)格的字符動(dòng)畫(huà)A可以。output: boxart;生成帶 Unicode 框線字符的增強(qiáng) ASCII 圖配合 Wiki 的pre標(biāo)簽展示適合純文本環(huán)境。Graph-Easy 讓畫(huà)流程圖這件事從打開(kāi)繪圖軟件退化為寫(xiě)一行文本。而output屬性 MediaWiki 模板的組合則讓這份文本直接在 Wiki 頁(yè)面中活起來(lái)——無(wú)需圖片文件無(wú)需額外依賴一條命令一個(gè)模板流程圖就嵌好了。【免費(fèi)下載鏈接】Graph-EasyConvert or render graphs (as ASCII, HTML, SVG or via Graphviz)項(xiàng)目地址: https://gitcode.com/gh_mirrors/gr/Graph-Easy創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考