ShuiBo'blog

人生若只如初见

嗨,我是水波 (@saber).


君以国士待我,我必国士报之。

Phuml 使用

项目需要画uml图,手写浪费时间,于是就搜了一些相关的工具来生成它。有php插件phpumd等等。发现了一个简单易用的工具,那就是phuml

Phuml

它是一款全自动uml图生成器,支持php5。

安装教程

git clone https://github.com/jakobwesthoff/phuml  //下载源码
yum install graphviz        //安装图形库
cd phuml/src/app
./phuml -r /path -graphviz -createAssociations false -neato test.png       //生成uml图

是不是很简单。 但是uml图并不方便操作。因为经常使用processon来做图,所以如果能生成一个可以导入到processon的.pos文件那就更好了。

.pos文件

processon支持导入.pos文件,那.pos文件到底是什么样子的?

{
    "diagram":{
    	//image是导出时,生成的图片,elements包含各个元素。导入主要看的是elements。
        "image":{
            "height":322,
            "pngdata":"", 					 //导出时,base64格式图片
            "width":310,
            "y":9,
            "x":26
        },
        "elements":{
            "page":{
                "gridSize":15,				 //网格大小
                "showGrid":true,			 //显示网格
                "orientation":"portrait",	 //页面方向 portrait竖向
                "height":1500,               //页面高度
                "backgroundColor":"transparent",  //背景颜色
                "width":1250,				 //页面长度
                "padding":20				 //页面的灰边宽度
            },
            "elements":{
                "15a3b34d769898":{			 //生成一串随机id作为标识,每个图形都对应着一个
                    "textBlock":[			 //文本块,uml图为三块
                    	//类名
                        {
                            "position":{
                                "w":"w-20",
                                "h":"30",
                                "y":"0",
                                "x":"10"
                            },
                            "text":"类"
                        },
                        //属性
                        {
                            "position":{
                                "w":"w-20",
                                "h":47,
                                "y":"35",
                                "x":"10"
                            },
                            "text":"+ attribute1:type = defaultValue + attribute2:type - attribute3:type",
                            "fontStyle":{
                                "bold":false,
                                "textAlign":"left"
                            }
                        },
                        //方法
                        {
                            "position":{
                                "w":"w-20",
                                "h":145,
                                "y":93,
                                "x":"10"
                            },
                            "text":"+ operation1(params):returnType - operation2(params) - operation3() + operation1(params):returnType - operation2(params) - operation3() + operation1(params):returnType - operation2(params) - operation3()",
                            "fontStyle":{
                                "bold":false,
                                "textAlign":"left"
                            }
                        }
                    ],
                    "lineStyle":{

                    },
                    "link":"",
                    "children":[

                    ],
                    "parent":"",
                    "attribute":{
                        "linkable":true,
                        "visible":true,
                        "container":false,
                        "rotatable":true,
                        "markerOffset":5,
                        "collapsable":false,
                        "collapsed":false
                    },
                    "fontStyle":{
                        "bold":true
                    },
                    "resizeDir":[
                        "tl",
                        "tr",
                        "br",
                        "bl"
                    ],
                    "dataAttributes":[

                    ],
                    "shapeStyle":{
                        "alpha":1
                    },
                    "id":"15a3b34d769898",
                    "anchors":[
                        {
                            "y":"0",
                            "x":"w/2"
                        },
                        {
                            "y":"h",
                            "x":"w/2"
                        },
                        {
                            "y":"h/2",
                            "x":"0"
                        },
                        {
                            "y":"h/2",
                            "x":"w"
                        }
                    ],
                    "title":"类",
                    "category":"uml_class",
                    "name":"cls",
                    "path":[
                        {
                            "actions":[
                                {
                                    "action":"move",
                                    "y":"4",
                                    "x":"0"
                                },
                                {
                                    "y1":"0",
                                    "action":"quadraticCurve",
                                    "y":"0",
                                    "x":"4",
                                    "x1":"0"
                                },
                                {
                                    "action":"line",
                                    "y":"0",
                                    "x":"w-4"
                                },
                                {
                                    "y1":"0",
                                    "action":"quadraticCurve",
                                    "y":"4",
                                    "x":"w",
                                    "x1":"w"
                                },
                                {
                                    "action":"line",
                                    "y":"h-4",
                                    "x":"w"
                                },
                                {
                                    "y1":"h",
                                    "action":"quadraticCurve",
                                    "y":"h",
                                    "x":"w-4",
                                    "x1":"w"
                                },
                                {
                                    "action":"line",
                                    "y":"h",
                                    "x":"4"
                                },
                                {
                                    "y1":"h",
                                    "action":"quadraticCurve",
                                    "y":"h-4",
                                    "x":"0",
                                    "x1":"0"
                                },
                                {
                                    "action":"close"
                                }
                            ]
                        },
                        {
                            "fillStyle":{
                                "type":"none"
                            },
                            "actions":[
                                {
                                    "action":"move",
                                    "y":30,
                                    "x":"0"
                                },
                                {
                                    "action":"line",
                                    "y":30,
                                    "x":"w"
                                },
                                {
                                    "action":"move",
                                    "y":88,
                                    "x":"0"
                                },
                                {
                                    "action":"line",
                                    "y":88,
                                    "x":"w"
                                }
                            ]
                        },
                        {
                            "lineStyle":{
                                "lineWidth":0
                            },
                            "fillStyle":{
                                "type":"none"
                            },
                            "actions":[
                                {
                                    "action":"move",
                                    "y":"0",
                                    "x":"0"
                                },
                                {
                                    "action":"line",
                                    "y":"0",
                                    "x":"w"
                                },
                                {
                                    "action":"line",
                                    "y":"h",
                                    "x":"w"
                                },
                                {
                                    "action":"line",
                                    "y":"h",
                                    "x":"0"
                                },
                                {
                                    "action":"close"
                                }
                            ]
                        }
                    ],
                    "fillStyle":{

                    },
                    "locked":false,
                    "group":"",
                    "props":{
                        "w":230,
                        "heights":[
                            30,
                            50,
                            145
                        ],
                        "angle":0,
                        "h":242,
                        "y":49,
                        "zindex":1,
                        "x":66
                    }
                }
            }
        }
    },
    "meta":{
        "id":"58a29cdce4b028637aca553f",
        "member":"saber",
        "exportTime":"2017-02-14 14:00:44",
        "diagramInfo":{
            "category":"uml",
            "title":"订单",
            "created":"2017-02-14 13:59:56",
            "attributes":null,
            "creator":"saber",
            "modified":"2017-02-14 14:00:25"
        },
        "type":"ProcessOn Schema File",
        "version":"1.0"
    }
}

所以只要仿照着它的格式来一份就能生成一份pos文件。

使用

git clone https://github.com/sabercoding/phuml  //下载源码
./phuml -r /path -processon  test.pos       //生成pos文件

待优化之处

  1. 类图大小及文本块大小
  2. 类之间的关系
  3. 类排版
最近的文章

添加flagcounter统计并支持https

flagcounter是个统计访问人数及地区的工具,能实时展示出来。##安装步骤 打开首页。 挑选样式,并点击生成。 支持邮箱注册,也可以跳过,获得安装代码。<a href="http://s11.flagcounter.com/more/Lnfv”><img src="http://s11.flagcounter.com/count2/Lnfv/bg_FFFFFF/txt_000000/border_CCCCCC/columns_2/maxflags_10/vie...…

继续阅读
更早的文章

解决:php json串传值到前端页面JSON.parse报错

使用yii2传值apps到views时,json_decode()完后再用js的JSON.parse转成对象时报错。原因是还需要对字符串进行转义。 主要是\n \“这两个$find = [''\\n'',''\\"''];$replace = [''\\\\\\n'', ''\\\\\\"''];apps: JSON.parse(''<?= str_replace($find,$replace,json_encode($apps))?>'')…

继续阅读