plantuml简介

简介

最近在学习设计模式,但是在画类图的时候,有一堆的画图工具可以选择,但总感觉用的不顺手。于是在网上找到了这个神奇的语言。PlantUML是一个开源项目,支持时序图、用例图、类图、活动图、组件图、状态图、对象图等的绘制。简而言之,就是用写代码的方式画图。几行代码,输出标准结构图,不用再去考虑结构、对齐等琐事啦!

效果预览

如下简单的语法表达类图之间的关系

1
2
3
4
5
6
7
8
@startuml
Class01 <|-- Class02
Class03 <|.. Class04
Class05 *-- Class06
Class07 o-- Class08
Class09 <.. Class10
Class11 <-- Class12
@enduml

效果如下:

再看一下复杂一点的装饰者模式类图,代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
@startuml
namespace Decorator{
interface Component
interface Decorator
Component : +operation():void
ConcreateComponent : +opreation():void
Decorator : -component:Component
Decorator : +opreantion():void
ConcreateDecorator1 : +opreation():void
ConcreateDecorator1 : +addBehavior():void
ConcreateDecorator2 : +opreation():void
ConcreateDecorator2 : +addBehavior():void
Decorator <|-- ConcreateDecorator1
Decorator <|-- ConcreateDecorator2
Component <|.. Decorator
Component <|.. ConcreateComponent
Decorator o-- Component
note bottom of Decorator
component.opreation();
end note
note bottom of ConcreateDecorator1
super.operation();
addBehavior();
end note
note bottom of ConcreateDecorator2
super.operation();
addBehavior();
end note
}
@enduml

效果图:

时序图长这样:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@startuml
title 时序图
== 鉴权阶段 ==
Alice -> Bob: 请求
Bob -> Alice: 应答
== 数据上传 ==
Alice -> Bob: 上传数据
note left: 这是显示在左边的备注
Bob --> Canny: 转交数据
... 不超过 5 秒钟 ...
Canny --> Bob: 状态返回
note right: 这是显示在右边的备注
Bob -> Alice: 状态返回
== 状态显示 ==
Alice -> Alice: 给自己发消息
@enduml

环境配置

这里主要介绍 Mac + VS Code + Markdown Preview Enhanced 实现PlantUML预览的配置过程

Mac环境支持plantUML的markdown编译步骤

1
2
3
4
brew install libtool
brew link libtool
brew install graphviz
brew link --overwrite graphviz

如果没有gem,先安装gem。然后执行下面语句安装 asciidoctor。

1
gem install asciidoctor

安装完支持环境之后,VS Code里装上 Markdown Preview Enhanced 就可以在markdown里编辑和预览效果啦!

plantuml语法:http://plantuml.com/

目前,sublime、Atom、VS Code、Webstorm都有相对应的插件来实现在编辑器里编辑和预览plantUML。

plantuml编辑器整理

这里还有一些其他的编辑器推荐。大部分都是在线预览版本,也有编辑器插件。

1、https://www.planttext.com/
2、http://www.plantuml.com/plantuml
3、https://sujoyu.github.io/plantuml-previewer/
4、Chrome插件 UML Diagram Editor (渲染效果模糊,速度慢)
5、Intellij Idea 插件(Android Studio 当然也支持):PlantUML integration

参考

前端编程利器VS Code

前言

先来个icon镇楼 ^_^

前端同学使用的编辑器可选范围非常广泛。

最开始接触到前端的时候,听说了Dreamweaver这么一个强大的软件,但严格意义上讲,这不能算作一个编辑器。后来认识了NotePad++,在当时,这确实是一款非常好用的编辑器,语法高亮的友好度仅次于IDE,而且占用内存小,运行非常流畅。

再然后,有人推荐Sublime。我用的时候,还是Sublime 2,最吸引我的是它的mini map,拖动mini map快速浏览大段大段的代码,比拖动小小的滑块酸爽很多呀。再加上后来安装的各种插件,感觉我进入了一个全新的世界,Sublime才是我最想用的编辑器呀!

工作之后,听说大家都在用webstorm,于是我也安装了一个试试,功能确实强大,特别它自带的git管理以及编辑器内部打开terminal的功能,非常适合前端开发。但是,功能强大的webstorm太过于笨重,每次打开的时候都要等一会儿,占用内存太高,同时开启两个项目的时候,电脑就会特别卡,非常影响写代码的心情,而且,webstorm是收费软件,用了一段时间之后果断放弃。

这时,我尝试了一款觊觎已久的酷炫编辑器 Atom。用了Atom之后,我才知道了什么叫酷炫!Sublime算什么,我再也不要用那个丑丑的Sublime了。基于Electron)(最初以Atom Shell知名)和许可使用Chromium和Node.js的跨平台应用框架,并使用CoffeeScriptLess)编写。Atom不但酷炫而且强大,因为有着活跃的社区,所以插件非常多,除了满足开发的刚需之外,还有很多想都想不到的插件。但是但是,美中不足的是Atom太卡了,而且用的时候偶尔还会崩溃。坚持用了一个月,最后实在受不了,我又换回Sublime了,但是心中很不甘啊!

当时我就想着,如果有一款编辑器可以像Sublime一样流程同时又像Atom一样酷炫该有多好。于是,我遇到了VS Code。VS Code刚刚发布Beta版时我尝试着用过一次,当时还不稳定,社区也不完善,插件更是贫乏,所以没留下好印象。这次重新尝试,是因为听说它和Atom一样,也是通过Electron编写的,我想,至少可以像Atom一样酷炫吧。试用之后才发现,原来这才是我一直苦苦寻找的理想编辑器呀!

特性

我强烈推荐VS Code的原因是它有以下几大特点:

  • 酷炫 和Atom一样采用Electron框架编写,整个软件其实就是一个WebAPP,样式深度定制,酷炫到超乎你想象。如果觉得还不过瘾,可以自己编写theme插件,满足你的各种癖好。
  • 轻量 虽然同样是采用Electron框架编写,但是VS Code和Atom走了不同的路线。Atom从一开始就把插件化架构摆在第一位,所以,Atom中最重要的是灵活而又完备的API,性能则不那么重要。VS Code则是把用户体验放在第一位,高性能、更能丰富才是它的首要目的,所以,一开始VS Code的插件系统很糟糕。但是VS Code的性能绝对高出Atom一个档位。
  • 开源 继承了Electron的良好基因。
  • 跨平台 依然是继承了Electron的良好基因。
  • 丰富的插件 虽然不如Sublime和Atom数量多,但现在已经有越来越多的插件涌入。
  • 活跃的社区 得益于Electron和Atom,VS Code的社区也是非常的活跃,更加快了插件生态的繁荣。

自带功能

Emmet

VS Code不需要安装插件,自身就实现了Emmet,默认就是打开的。

智能感知

VS Code本身自带JS代码提示和自动补全功能,当然,如果你觉得不够用,还可以安装各种intelligence或者snippets插件来满足需求。

JS智能提示

Format Document

对于压缩的代码,或者格式不够规范的代码文件,可以通过这个命令一键格式化代码。当然,这个功能是每个编辑器应该都有的,并不是亮点。

Fromat Document

Auto Save

自动保存功能也是大部分优秀的编辑器应该必备的。我认为VS Code里做的比较人性化的一个点是,它的设置选项里提供了四种自动保存的时机供我们选择:offafterDelayonFocusChange(编辑器失去焦点)、onWindowChange(窗口失去焦点)。如果设置为afterDelay,则可在 files.autoSaveDelay 中配置延迟。我比较喜欢onWindowChange

Auto Save

Terminal

VS Code自带打开Terminal的功能,这是Atom和Sublime所不具备的。这也算是VS Code的一大亮点。

Terminal

插件推荐

接下来,推荐一些我用到过的非常实用的插件,帮助你编程时候事半功倍!

Git History

Git History

可以查看一个文件的所有提交记录,同时还可以调出一个可视化的界面展示文件的提交记录,是git log的强化版。还可以查看某一行的所有提交记录。

Git Peoject Manager

这是一个git项目管理的插件,一共就4个命令:

  • GPM: Open Git Project (Ctrl+Alt+P):打开git项目
  • GPM: Refresh Projects:刷新git项目
  • GPM: Refresh specific project folder:刷新特定路径下的git项目
  • GPM: Open Recent Git Project (Ctrl+Shift+Q):最近打开的git项目列表

Git Project Manager

插件的使用也很简单,找到配置文件中gitProjectManager.baseProjectsFolders把git项目的根目录放进去,就像下边这样:
{ "gitProjectManager.baseProjectsFolders": [ "/home/user/nodeProjects", "/home/user/personal/pocs" ] }

然后cmd + shift + P调出命令栏,并输入GPM,上述的4个命令就被列出来了,选择Refresh Projects,稍等一会儿后,被我们添加到配置文件里的路径下的所有git项目都会被列出来。选择你的工作目录开始Coding吧!

Git Lens

这是一款非常强大的git插件,它提供的每一个功能,都戳中了我们日常开发中的需求痛点。所以,我强烈推荐大家安装并使用这款插件。先目睹一下它的功能概览gif图:

gitlens-preview.gif

Code Lens

在文件的顶部展示代码变更的总的记录,包括左边的最新修改记录以及右边的所有的修改作者数量。

Code Lens

Blame Annotations

点击右边的作者数量可以进入整个文件的Blame Annotations。这里展示了每一行的最后一条修改记录,具体的展示方式可以在设置里自己配置,包括作者、时间和commit信息。

Blame Annotations

Status Bar Blame

这个是指在状态栏里展示当前光标所在行的Git Blame信息。当然这里要展示的信息和格式也是可以配置的。这样,光标所在的行的最新git记录和作者信息完全展示在了状态栏里。

Status Bar Blame

Interactive Blame

这个功能和Status Bar Status类似,只不过,git信息是直接展示在文件中的代码后边。鼠标悬停在git记录上时,会有更详细的git变更气泡弹出。就像下边这样:

Interactive Blame

Quick Menu

快捷键shift + alt + H调出branch history quick pick menu, 这个菜单功能非常强大,我们可以查看之前的commits信息、所有commits信息、根据message/author/filename搜索commits信息、查看一些文件的历史记录等。

Quick Menu

Search by messages

Search by autor 01

Search by autor 02

Search by filename 01

Search by filename 02

通过message查找时,直接在输入框里输入message的关键信息即可。通过author查找时,则是输入@author,类似于图中的@Zeke。而通过filename查找,则需要注意一下,这里应该是: filepath,也就是相对于当前项目根目录的相对路径。类似于图中的:lib/browser/chrome-extension.js。除了这些之外,还可以根据commit id查找,这个用的不多,这里就不再举例了。

Project Manager

项目管理插件,这个功能和Git Project Manager有点类似,只不过,这个不但能管理git项目,还可以管理其他项目。

Project Manager

这个插件一共5个命令:

  • Project Manager: Edit Project Edit 跳转到配置文件 projects.json 进行项目列表目录的配置修改。
  • Project Manager: List Projects 列出已经保存的项目列表。
  • Project Manager: List Projects to Open in New Window 列出已保存的项目列表并在新窗口打开选中的项目。
  • Project Manager: Refresh Projects 刷新项目列表。
  • Project Manager: Save Project 保存当前项目到项目列表。

其他插件

其他的一些插件就不做详细介绍了,这里列出我用过的感觉比较好的,大家自己到github上查阅吧。vscode-iconsvscode-fileheaderDocument ThisCSS PeekFile PeekMarkdown PDFMarkdown Preview EnhancedRegex Railroad Diagrams

如果还有其他比较好用或者有意思的插件,欢迎大家前来留言。一起讨论交流。

吹雪


我经历了一次美丽的邂逅

是这突如其来的吹雪

轻轻吻向泥土的等候



洁白在灯光交汇下漫天轻柔

伴着人们心满意足的步调

目睹了一对对静静地走到白头

不得不说再见


终于这宴席还是要散场

请不要为我鼓掌

也不要欢送



潺潺的流水在为我歌唱

盛放的蔷薇散发着芬芳

河边的杨柳也在轻轻地飘荡



夏天总因离别变得黯然惆怅

还想再听一听丰富多彩的课堂

还想再逛一逛青春洋溢的操场

还想再聊一聊槽点满满的旧日时光

还想,还想……



别了校园,别了矿大

别了那逝去的青春模样



南湖上升起的月光

请替我守护这片温馨的土壤

我在下一个路口等待

青春不散场

安装静态博客Jekyll

Jekyll是一种纯文本的静态博客,安装成功之后,直接通过markdown文本就可以更新博客内容。Jekyll的安装过程比较简单,但是安装的过程中仍然会跳进很多坑。Jekyll和Github Pages是一种很好的结合。Github Pages是github提供的一个可以免费部署个人网站且没有存储上限的一个功能。在Jekyll的官网里也有把Jekyll部署到Github Pages上的教程。

安装Jekyll

如果需要部署到Github Pages,Jekyll需要在本地完成安装,然后再进行部署。Jekyll的安装智能在Linux和Mac OS X上进行,另外,其依赖Ruby和RubyGems,建议安装rvm来控制Ruby的版本。Linux和Mac OS X一般都会有系统自带的Ruby,但是版本比较旧,通过


ruby -v

可以查看当前Ruby的版本。当前Github Pages支持的是Jekyll 3.0,其依赖的Ruby 2.0及其以上版本,所以建议安装Ruby 2.0或其以上版本。
本次安装,我是直接从github上找了一个别人做好的带主题的Jekyll,然后安装在自己的VPS上了,这个Jekyll Theme的名字叫做Personal,把它git到我vps上之后,通过一个命令就可以安装完成:


./scripts/install

它对Ruby的需求是2.0及其以上版本,否则会安装失败。

配置

安装成功之后,需要对_config.yml文件进行一些个性配置。具体配置可以参考项目中的教程。主要的配置有以下几个:

  • url:这个是用来指向自己的域名(如果你有的话),配置到Github Pages上并指向自己的域名或者二级域名可以参考github官方教程
  • baseurl:用来设置自己网站的相对根目录,我设置的是空,因为在我的Github Pages中的这个项目是直接放在根目录下的
  • force-https:这个配置是原版Jekyll没有的,这里建议设置为false,因为Github Pages目前既支持http也支持https,如果自己没有https的证书的话,还是把其关闭的好

其余的配置都可以参考personal项目中的教程。

部署

配置完成之后,就可以部署到Github Pages中了,我直接把安装好的整个文件夹push到了github中。在push之前,需要先创建自己的Github Pages,每一个github用户只能创建一个Github Pages,这里是官方创建教程。创建完成之后,把自己的文件push到根目录下,就可以通过 http://gitusername.github.io 访问了,如果设置了个人的域名,则需要到自己的域名管理网站更新域名指向,把设置的域名指向 http://gitusername.github.io 即可。需要注意的是,把自己的项目文件push到github之后,也许并不能立刻就访问到网页,也许是因为github内部需要一段时间的部署。我当时部署到github之后,立刻访问得到的是404页面,刚开始以为是自己配置出错了,过滤几个小时之后,再次访问,页面才第一次呈现。

南湖向晚


没有偶遇记忆中雨后的彩虹

这里清清静静悄悄依旧

于是

晚霞偷偷染红了半边天空



故地重游的喜悦

总伴着物是人非的惆怅

回忆也显得那么美那么伤

那么无可奈何的凄凉



每一次心心念念的感慨

都装入成长路上破旧的行囊

变与不变的留恋

都化作或甜或苦的记忆珍藏

再次回归的少年依旧

因为我从未离开不曾遗忘

趁黄昏


十里春风独爱这柳树的枝头

趁黄昏,走一走

晚风亲吻着温柔



一次日落偏好那静静的巷口

趁黄昏,等一等

夕阳西下的守候

Ubuntu用户设置

最近在安装实验室一台服务器,系统装的是Ubuntu 14.04,今天在添加用户的时候出了点小问题,在这里总结一下。

为Ubuntu添加新用户

在网上查到为Ubuntu填加新用户的方式是 sudo useradd me和passwd me来设置,但是,这样设置有一个很大的坑,因为这样设置的用户信息是不全的,直接导致使用这种方式设置的用户在进行远程登陆的时候,会出现

1
Could not chdir to home directory /home/me: No such file or directory

的错误,可以用过输入 bash 来进入正常的状态

1
2
$ bash
me@server:/$

为了解决这个问题,其实就是修改用户的默认shell为bash。去Google了一番,终于找到解决方案:
http://askubuntu.com/questions/28969/how-do-you-change-the-default-shell-for-all-users-to-bash
方法就是,如果是root用户:

1
usermod -s /bin/bash USERNAME

如果不是root用户:

1
sudo -u USERNAME chsh -s /bin/bash

走过这个坑之后,建议以后添加用户,换成另外一种方式, sudo adduser me,这样虽然麻烦一些,但是权限和信息都是更加完整的。

为用户添加root权限

为了能使用root权限,又去搜索了一遍如何为用户添加root权限,这里有一篇文章讲解的很详细http://blog.csdn.net/dreamback1987/article/details/8766302。这里的关键点就是在修改 /etc/sudoers文件前,需要修改它的权限,改完保存之后,再把文件权限修改回来,因为如果 /etc/sudoers 文件的权限为 777 的话,sudo命令就不能使用了。

root用户和普通用户来回切换

因为本人菜鸟一枚,这里记录一下刚刚学到的一个小命令,就是root用户和普通用户的来回切换:

1
2
$su root #切换到root用户
$su me #切换到me用户