Hexo绘图教程

Posted on | In ,

本文针对Hexo的Markdown写作中绘图教程进行讲解

PlantUML绘图

介绍及安装

PlantUML是一个脚本画图语言，能够快速生成各种UML及非UML图，比较好用，一个简单的实例如下：

1
2
3
{% plantuml %}    
    Bob->Alice : hello
{% endplantuml %}

缺点是没办法在markdown中实时显示，但是可以在官网上进行绘制，然后将代码拷贝回来。安装方式也比较简单，执行下面语句即可

1
npm install hexo-tag-plantuml --save

绘制类图

使用PlantUML进行类图绘制的教程：类图绘制，常见的六种类间关系（泛化、实现、聚合、组合、关联、依赖）图及代码如下：

1
2
3
4
5
6
7
8
9
10
{% plantuml %}    

Car <|--SUV             //泛化
Vehicle <|.. Car        //实现
Class o-- Student       //聚合
Human *-- Heart         //组合
Human -- IDCard         //关联
Bike <.. Student        //依赖

{% endplantuml %}

SVG

SVG指可缩放向量图，是一种不失真的网页图片，建议以后都使用SVG进行绘图，在Hexo中嵌入SVG的方式如下：

1
2
3
4
5
6
<div style="text-align:center;">
<svg width="100" height="100">
   <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
   Sorry, your browser does not support inline SVG.
</svg> 
</div>

效果如下图所示：

Sorry, your browser does not support inline SVG.
也可以将svg传到图床上，然后用图片的形式添加 ### 属性 **`width`**：宽度 ## 参考文献
0%