Drawio 可以方便地输出流程图,也可以导出 html 代码,本文记录将 drawio 文件导出的 html 代码渲染到 hexo 博客中的方法。
导出为
的方法或嵌入
的方法文件
-> 导出为
-> HTML
导出
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=5,IE=9" ><![endif]-->
<!DOCTYPE html>
<html>
<head>
<title>未命名绘图</title>
<meta charset="utf-8"/>
</head>
<body><div class="mxgraph" style="max-width:100%;border:1px solid transparent;" data-mxgraph="{"highlight":"#0000ff","nav":true,"resize":true,"toolbar":"zoom layers tags lightbox","edit":"_blank","xml":"<mxfile host=\"Electron\" modified=\"2023-01-09T09:11:04.012Z\" agent=\"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/20.7.4 Chrome/106.0.5249.199 Electron/21.3.3 Safari/537.36\" etag=\"sjEwUV0v36QnULryjynB\" version=\"20.7.4\" type=\"device\"><diagram id=\"3228e29e-7158-1315-38df-8450db1d8a1d\" name=\"Page-1\">1dfLb5swHAfwvybXCr94HJOs7XboZZ20swcOWDV25Div/fVzwo8EYip1aoRoDhH++oH9MbJgRpb14dnydfViCqFmOCoOM/JthnGapP7/FBwhiJImKK0smghdg1f5V0AYQbqVhdj0GjpjlJPrfpgbrUXuehm31uz7zVZG9e+65qUIgtecqzD9LQtXQYri7FrxXciyglunGNb3h+dvpTVbDffTRoumpubtMLDGTcULs+9E5HFGltYY11zVh6VQJ9VWrOn39E7tZcpWaPeRDhgxAp12XG1h5TA3d2wpfCev7guLlVRqaZSx5wryFKVJxHxu1jyX7rTTceSLG2fNm2gbngHIonK18iV0GsZo1x3m/PN5OP92dsI6cehEsJ5nYWrh7NE3gVpC6QNrOsGDhzPQ3l+3kUWQVZ0dvIQcHp3yMvrV0F8A4/uk+BOkCM/ni2mRoiTqgdKxPcknPEXKYoon5Unj7OYRJWOL0kD0h975FUmjA1q/KgcgcEpj6stcyVL7Qu67Ca+0OAFIf37OoaKWRaHGU8XZrao/k9ukA4uyAdjkTq4scP0pdkZtvzJsPAXYOID9ZXkhv7IrDVwZG901CVxfpJKOw0gDrAHjB7Q6W4Hi++ix4BBF2ZAeHcCjd8JLA7yl0Ssl/dvotPEovcWjaGy8LMSruNlMXC48DEeXa4fpyHkdrnMxcTvGsgd88+JDh/DiqA27fAS16X8A+uL1c+pc1/laJY//AA==</diagram></mxfile>"}"></div>
<script type="text/javascript" src="https://viewer.diagrams.net/js/viewer-static.min.js"></script>
</body>
</html>
body
中的代码文件
-> 嵌入
-> HTML
创建
两种方法获取的代码是相同的,都可以使用
<div class="mxgraph" style="max-width:100%;border:1px solid transparent;" data-mxgraph="{"highlight":"#0000ff","nav":true,"resize":true,"toolbar":"zoom layers tags lightbox","edit":"_blank","xml":"<mxfile host=\"Electron\" modified=\"2023-01-09T08:53:08.642Z\" agent=\"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/20.7.4 Chrome/106.0.5249.199 Electron/21.3.3 Safari/537.36\" etag=\"nM_XbfnI6LI-bt9XxW_9\" version=\"20.7.4\" type=\"device\"><diagram id=\"3228e29e-7158-1315-38df-8450db1d8a1d\" name=\"Page-1\">1ddNb5swGAfwT8O1wm8kHJOs7XboZZ20swcOWDV25Dhv+/Qz4SGBmEqdGiGaS/DfL9g/IwsisqqOz5ZvyheTCxXhOD9G5FuEMaKE+r86OTXJnCRNUFiZQ6Nr8Cr/CghjSHcyF9teQ2eMcnLTDzOjtchcL+PWmkO/2dqo/l03vBBB8JpxFaa/Ze5KSFGSXiu+C1mUcOs5njUVf3j2Vliz03A/bbRoaireDgNr3JY8N4dORB4jsrLGuOaqOq6Eqllbsabf0zu1lylbod1HOmDECHTac7WDlcPc3Kml8J28ui8s11KplVHGnivIUzyfxcznZsMz6eqdTmJf3Dpr3kTb8AxAlqWrlC+hehijXXeY88/n4fzb2QnrxLETwXqehamEsyffBGoJpQ+s6QQPHk5B+3DdRhZDVnZ28BJyeHSKy+hXQ38BjO+T4k+QIrxYLKdFimZxD5SO7Uk+4SnmLKF4Up40SW8eUTK2KA1Ef+i9X5E0OqD1q3IAAqc0pr7MlSy0L2S+m/BKyxpA+vNzARWVzHM1nipOb1X9mdwmHViUDsDO7uTKAtefYm/U7ivDJlOATQLYX5bn8iu70sCVsdFdZ4Hri1TScRhpgDVg/IBWZytQch89FhyiKB3SowN49E548wBvZfRaSf82Om08Sm/xKBobLw3xSm62E5cLD8PR5dphOnJeh+tMTNyOsfQB37z40CG8JG7DLh9BbfofgL54/Zw613U+V8njPw==</diagram></mxfile>"}"></div>
<script type="text/javascript" src="https://101.43.39.125/HexoFiles/js/viewer-static.min.js"></script>