简单几行代码，生成手绘风格配图，再也不用担心配图丑了！

嗨！這个最有深度的『研究笔记』由程序员界最会排版の追星族运营?

2019年

12月17日

简单几行代码，生成手绘风格配图，再也不用担心配图丑了！

小编：Lateautumn4lin(逆向小小小学生)

咳咳！先说说背景哈，自从两个月之前看到了葛饰北斋的神奈川冲浪里，也就是下面这幅神仙图之后，便深深沉迷于这种浮世绘风格不能自拔。

再之后由于开了公众号，在写文章的时候需要各种配图，但是又对于那些普通的，死板的配图XXXX（词穷，不知道如何表达

）。于是乎！ 萌生了一个想法，“为何不在文章里加上一些手绘风格的配图呢？正好也恰合我的公众号‘笔记’这一个想法”，于是便在全网各种搜罗有关于如何生成手绘风格配图的方案。

1

配图方案搜罗阶段

苦苦寻求，不得其解

翻遍了各大搜索引擎、软件网站

方案从mac、windwos甚至到了linux，从windows的penci、balsamiq到mac的keynote，找了一圈还是没有发现合适上，上面的几个工具有点偏产品原型的工具，虽然风格上来说很贴近我的需求了，但是工具中包含的各种原型控件类的组件还是让我觉得有点多余，而且使用上对于我这种不太熟悉原型设计工具的程序猿来说不好上手，所以经历了“找一个放弃一个的先喜后悲的过程”。

2

临时解决方案阶段

觅得一宝，雪中送炭

直到一个月前发现了这个网站----websequencediagrams

可喜可贺，终于找到一个还算合口味的了，这个网站算的上是“一分钟上手”，简单编写下面这样的语句：

用户-> 客户端:访问页面
客户端->服务端:无Cookie访问
服务端 ->客户端:没有携带Cookie，重定向到获取Cookie页面
客户端 ->Cookie获取地址:根据各种方法获取Cookie
Cookie获取地址->客户端:返回Cookie
客户端->服务端:携带Cookie访问
服务端 ->客户端:携带Cookie，允许访问，返回详情页面
客户端-> 用户:详情页面

就可以生成这样的手绘风格图形了

更最要的是，我们编写的语句简单直观，相信很多人都马上就能理解如何使用啦

找到了这个工具之后，对我来说算是“雪中送炭”了，大家看到我之前发的几篇文章也可以看到我使用到了这个工具。不过，使用了工具也将近一个月了，这个工具虽然使用上相对于其他工具来说简单易用，但是在功能和手绘风格方面还是有所欠缺的，画了这么多图只有一种手绘风格真的是腻了！

于是又要重新踏上新的寻找之旅。。。

3

开花结果阶段

功夫不负有心人

哈哈，在搜罗的时候被朋友推荐了一位大佬开发的工具，oxygen，整个风格就如下图 所示，一看到这个工具我就被“深深”的吸引了，浓浓的“简洁风”，而且有多种风格可选， 避免让你陷入“单一的绘图模式”。

不过这个工具需要使用代码来生成，所以可能对于没有接触过编程的朋友来说上手有一点 难度，下面我们具体看看这几种手绘风格

Graphviz风格

标准的图形风格

我们看看具体的生成代码

digraph hash {
  nodesep=.05;
  rankdir=LR;
  node [shape=record,width=.1,height=.1];

  node0 [label = "<f0> |<f1> |<f2> |<f3> |<f4> |<f5> |<f6>",height=2.5];
  //生成左侧的主链表
  node [width = 1.5];
  node1 [label = "{<n> n14 | 719 |<p> }"];
  node2 [label = "{<n> a1 | 805 |<p> }"];
  node3 [label = "{<n> i9 | 718 |<p> }"];
  node4 [label = "{<n> o15 | 794 |<p> }"];
  //生成四个子链表
  node0:f0 -> node1:n;
  node0:f2 -> node2:n;
  node2:p  -> node4:n;
  node0:f5 -> node3:n;
  //子链表挂在主链表上面
}

这样既可生成如下图形啦

SequenceUML风格

UML尝试

这个UML图形生成和上一个工具类似，使用的代码也差不多

Andrew->China: Says Hello
Note right of China: China thinks\nabout it
China-->Andrew: How are you?
Andrew->>China: I am good thanks!

生成如下图形

FlowChart风格

手绘的流程图，满满笔记风

这个工具做出的流程图真的很有笔记风！想起了大学学编程手绘的流程图了。

看看具体生成代码是如何编写的

st=>start: Start|past:>http://www.google.com[blank]
e=>end: End|future:>http://www.google.com
op1=>operation: My Operation|past
op2=>operation: Stuff|current
sub1=>subroutine: My Subroutine|invalid
cond=>condition: Yes
or No?|approved:>http://www.google.com
c2=>condition: Good idea|rejected
io=>inputoutput: catch something...|future
//编写点到点之间的文字说明
st->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e
//编写各个流程之间的关系

生成的流程图

Mermaid风格

不认识的单词，翻译是美人鱼？

不理解这个风格是什么？有时候随机的代码类似UML，有时类似于流程图，可能这个风格比较随意，哈哈，看来作者是想要我们遇到选择困难症的时候时候这个风格来随机生成吧，这个风格就不解释了。

END

鉄子，“在看”来一个