Codeuml —— 设计 UML 图表跟你编码一样快

最新推荐文章于 2024-05-26 14:39:19 发布

阳泉

最新推荐文章于 2024-05-26 14:39:19 发布

阅读量1.9k

点赞数 1

分类专栏： Java-学习笔记

本文链接：https://blog.csdn.net/mlin_123/article/details/50709629

版权

Java-学习笔记专栏收录该内容

60 篇文章 0 订阅

订阅专栏

原址：点击打开链接

Codeuml —— 设计 UML 图表跟你编码一样快

简介

Codeuml是一个基于Web的UML设计工具，你可以用一种特别的语言编写图例，并快速输出图形。它比任何图形化设计工具（拖拽元素和点击鼠标连接元素）都来得更有效率。Codeuml使用开源引擎plantuml来从文本产生图形。你可以像编写代码一样迅速地设计图例。

这个web应用展示了一些有趣的设计和编程挑战。首先，它告诉你如何创建一个基于web的IDE环境，并模仿了Windows 8 Metro UI。其次，它展示了怎样定期地从网站收集数据，异步地后台发送给服务器，并迅速返回结果。最后并且是最重要的，它显示了如何维护一个服务器端的数据池，来持久化一些必要的资源，你不可能在用户每次访问的时候生成它们，所以必须要有一个有限的数据池供所有web用户使用。

获取代码

实时演示地址： www.codeuml.com

程序源码： http://code.google.com/p/codeuml/

前端的创建

我从Windows 8的Metro UI中得到了灵感，并且它对平板也很友好。你可以轻松地在平板上点击按钮。我使用jQuery Splitter plugin创建了三列的可变宽度面板；文本编辑器使用了CodeMirror，它功能很轻大但是图标很吓人；并用 jQuery New Ticker 插件创建了滚动新闻效果。

3列的视图是使用下面的html实现的：

 
<div id="MySplitter">
 
        <div class="SplitterPane unselectable">
 
            <div id="umlsnippets">
 
.
 
.
 
.
 
            </div>
 
        </div>
 
        <div id="CenterAndRight">
 
            <div class="SplitterPane">
 
                <img src="img/ajax-loader.gif" id="ProgressIndicator" />
 
                <textarea id="umltext" rows="10" cols="40"></textarea>
 
            </div>
 
            <div class="SplitterPane">
 
                <div id="umlimage_container">
 
                    <img id="umlimage" src="img/defaultdiagram.png" />
 
                    <div id="ticker">
 
                        News ticker
 
                    </div>
 
                </div>             
 
            </div>
 
        </div>
 
    </div>

首先将屏幕分成两部分——左边的UML片段栏和右边的编辑器和图像栏。之后将右边分成两部分——文本编辑器和图示图像。之后的Javascript初始化了这种分割：

 
// Main vertical splitter, anchored to the browser window
 
$("#MySplitter").splitter({
 
    type: "v",
 
    outline: true,
 
    minLeft: 60, sizeLeft: 100, maxLeft: 250,
 
    anchorToWindow: true,
 
    resizeOnWindow: true,
 
    accessKey: "L"
 
});
 
// Second vertical splitter, nested in the right pane of the main one.
 
$("#CenterAndRight").splitter({
 
    type: "v",
 
    outline: true,
 
    minRight: 200, sizeRight: ($(window).width() * 0.6), maxRight: ($(window).width() * 0.9),
 
    accessKey: "R"
 
});
 
$(window).resize(function () {
 
    $("#MySplitter").trigger("resize");
 
});

之后，将CodeMirror编辑器作用于文本域，让其变成一个出色的文本编辑器。

 
myCodeMirror = CodeMirror.fromTextArea($('#umltext').get(0),
 
            {
 
                onChange: refreshDiagram
 
            });
 
myCodeMirror.focus();
 
myCodeMirror.setCursor({ line: myCodeMirror.lineCount() + 1, ch: 1 });

然后初始化左边的UML片段栏。每个按钮都有一段相关联的UML文本，当点击按钮的时候它们就会被写入编辑器。一个按钮的例子：

 
<div id="scrollable">
 
    <!-- Sequence diagram -->
 
    <h2>
 
        Sequence
 
    </h2>
 
    <div class="sequence_diagram">
 
        <div class="button">
 
            <div class="icon">
 
                A&rarr;B</div>
 
            <div class="title">
 
                Sync Msg</div>
 
            <pre class="umlsnippet">A -> B: Sync Message</pre>
 
        </div>
 
    </div>

被插入文本编辑器中的代码在<pre>标签中。

你可以创建任意多的UML片段按钮，只要将UML片段放入<pre>中，并设置其类为umlsnippet就可以了。

当按钮被点击时，下面的代码用于将<pre>中的片段插入文本编辑器中：

 
$("#umlsnippets").find(".button").click(function () {
 
    var diagramType = $(this).parent().attr("class");
 
 
 
    if (lastUmlDiagram !== diagramType) {
 
        if (!confirm("The current diagram will be cleared? Do you want to continue?"))
 
            return;
 
 
 
        myCodeMirror.setValue("");
 
    }
 
 
 
    changeDiagramType(diagramType);
 
 
 
    var umlsnippet = $(this).find("pre.umlsnippet").text();
 
     
 
    var pos = myCodeMirror.getCursor(true);
 
 
 
    // When replaceRange or replaceSelection is called
 
    // to insert text, in IE 8, the code editor gets 
 
    // screwed up. So, it needs to be recreated after this.
 
    myCodeMirror.replaceRange(umlsnippet, myCodeMirror.getCursor(true));
 
 
 
    // recreate the code editor to fix screw up in IE 7/8
 
    myCodeMirror.toTextArea();
 
    myCodeMirror = CodeMirror.fromTextArea($('#umltext').get(0),
 
    {
 
        onChange: refreshDiagram
 
    });
 
 
 
    myCodeMirror.focus();
 
    myCodeMirror.setCursor(pos);
 
 
 
    refreshDiagram();
 
});

这里有一个问题，如果我插入的文本中叫replaceRange，CodeMirror编辑器就会停止工作。我需要重写它使其重新正确地工作。

边输入边生成图表

在你输入的时候刷新图表是最具挑战的部分。下面的 javascript 函数会在文本编辑器的内容发生改变时触发。考虑到及时性和有效性的均衡，它被设置成每秒只向服务器发送一次 UML 。所以，即使你连续快速敲击，也不会导致对服务器的轰炸式请求。

 
function refreshDiagram() {
 
 
 
  if (lastTimer == null) {
 
     
 
    lastTimer = window.setTimeout(function () {
 
      // Remove starting and ending spaces
 
      var umltext = myCodeMirror.getValue().replace(/(^[\s\xA0]+|[\s\xA0]+$)/g, '');
 
 
 
      var umltextchanged = 
 
        (umltext !== lastUmlText) 
 
        && validDiagramText(umltext); 
 
 
 
      if (umltextchanged) {
 
        $('#ProgressIndicator').show();
 
 
 
        lastUmlText = umltext;
 
 
 
        $.post("SendUml.ashx", { uml: umltext }, function (result) {
 
          var key = $.trim(result);
 
          $("#umlimage").attr("src", "getimage.ashx?key=" + key);
 
        }, "text");
 
 
 
        try {
 
          var forCookie = $.base64.encode(umltext).replace(/==/, '');
 
 
 
          if (forCookie.length > 3800) {
 
            alert("Sorry maximum 3800 characters allowed in a diagram");
 
          }
 
          else {
 
            createCookie('uml', forCookie, 30);
 
            var test = readCookie('uml');
 
 
 
            if (test !== forCookie) {
 
              createCookie('uml', '', 30);
 
            }                                
 
          }
 
        } catch (e) {
 
        }
 
      }
 
    }, 1000);
 
  }
 
  else {
 
    window.clearTimeout(lastTimer);
 
    lastTimer = null;
 
    refreshDiagram();
 
  }
 
 
 
}

这个代码的确比较聪慧。首先，它确保当用户只是输入空格或敲回车时，由于并没有发生导致需要呈现一幅新图表的变化，所以就不把UML文本发往服务器，节省了没有必要的昂贵的图像生成过程。它还有一点验证以防止尚属半成品的图表表示文本被过早地发送到服务器。你越是能在这里捕捉越多验证细节，就越能在服务器上减少生成无用的图像。

首先，它将UML文本提交到名为endUml.ashx的http处理器.它会保存文本并返回一个GUID,GUID触发生成图的GetImage.ashx。SendUml.ashx很简单:

 
public class SendUml : IHttpHandler {
 
     
 
    public void ProcessRequest (HttpContext context) {
 
        string uml = context.Request["uml"];
 
        string key = Guid.NewGuid().ToString();
 
 
 
        context.Cache.Add(key, uml, null, DateTime.Now.AddSeconds(60), System.Web.Caching.Cache.NoSlidingExpiration,
 
            System.Web.Caching.CacheItemPriority.Default, null);
 
         
 
        context.Response.ContentType = "text/plain";
 
        context.Response.Write(key);

它只是将其短暂的存储在缓存之中，因为当获得GUID后立刻就会触发GetImage.ashx。

 
public void ProcessRequest (HttpContext context) {
 
 
 
    string key = context.Request["key"];
 
    string umltext = context.Cache[key] as string;
 
     
 
    context.Response.ContentType = "image/png";
 
    context.Response.Cache.SetCacheability(HttpCacheability.Private);
 
    context.Response.Cache.SetExpires(DateTime.Now.AddMinutes(5));
 
     
 
    if (context.Request["saveMode"] == "1")
 
    {                
 
        context.Response.AddHeader("Content-Disposition", "attachment; filename=diagram.png");
 
    }
 
     
 
    var connection = PlantUmlConnectionPool.Get(TimeSpan.FromSeconds(15));
 
    if (connection == null)
 
        throw new ApplicationException("Connection not found in pool.");
 
 
 
    try
 
    {
 
        var uploadFileName = key + ".txt";
 
        var downloadFileName = key + ".png";
 
         
 
        connection.Upload(uploadFileName, 
 
            "@startuml " + downloadFileName + Environment.NewLine +
 
            umltext + Environment.NewLine +
 
            "@enduml");
 
         
 
        System.Threading.Thread.Sleep(100);
 
 
 
        using (MemoryStream memoryStream = new MemoryStream())
 
        {
 
            connection.Download(downloadFileName, stream =>
 
            {
 
                byte[] buffer = new byte[0x1000];
 
                int bytesRead;
 
                while ((bytesRead = stream.Read(buffer, 0, 0x1000)) > 0)
 
                {
 
                    memoryStream.Write(buffer, 0, bytesRead);
 
                }
 
 
 
            });

首先，从查询字符串中进行读取然后从缓存中读取UML 文本.紧接着，它会获取一个到PlantUml ftp服务器的链接(下一节将会被提到)并且将UML文本作为一个文件上传到FTP服务器，PlantUml 然后生成图片以便下载。然后该Handler将会从ftp服务器上下载。最后添加水印并返回给浏览器。

 
using (Bitmap b = Bitmap.FromStream(memoryStream, true, false) as Bitmap)
 
using (Bitmap newBitmap = new Bitmap(b.Width, b.Height + 20))
 
using (Graphics g = Graphics.FromImage(newBitmap))
 
{
 
    // Put the original image on the top left corner.
 
    g.FillRectangle(Brushes.White, 0, 0, newBitmap.Width, newBitmap.Height);
 
    g.DrawImage(b, 0, 0);
 
     
 
    // Add the watermark
 
    SizeF size = g.MeasureString(WatermarkText, _font);
 
    g.DrawString(WatermarkText, _font, Brushes.Black, newBitmap.Width - size.Width, newBitmap.Height - 15);
 
 
 
    // Save the image to the response stream directly.
 
    newBitmap.Save(context.Response.OutputStream, System.Drawing.Imaging.ImageFormat.Png);
 
}
 
 
 
context.Response.Flush();

一旦作业完成，它将会返回到连接池中以便下一个会话进行连接。

`1`	`PlantUmlConnectionPool.Put(connection);`

这就是全部的运行过程

使用Plantuml生成图

Plantuml是一个可以作为FTP服务器运行的java应用程序，把文本以文件方式上传，然后生成图片方便下载。因为它可以作为一个FTP服务器运行，我必须有个保持运行FTP服务器的池子。我不能只是启动FTP服务器来生成图片，这样做会太慢了。所以，我得在启动应用程序时同时启动几个FTP的实例，然后一直保持与FTP服务器的连接池相连接。每当为了生成图表而触发getimage.ashx，它会从连接池里获得一个连接来处理这个请求，然后再返回到连接池里去。当你不得不在许多客户请求中共享有限数量的资源时，这是一个你可以使用的通用模式。

首先，我保持运行一个Plantuml实例的池子。在Application_Start事件中，以下代码可以启动多个Plantuml的FTP服务器，并准备好连接池。

 
public static class PlantUmlProcessManager
 
{
 
    private static readonly List_processes = new List();
 
 
 
    public static void Startup()
 
    {
 
        if (_processes.Count > 0)
 
            Shutdown();
 
 
 
        var javaPath = ConfigurationManager.AppSettings["java"];
 
 
 
        if (!File.Exists(javaPath))
 
            throw new ApplicationException("Java.exe not found: " + javaPath);
 
 
 
        var host = ConfigurationManager.AppSettings["plantuml.host"];
 
        var startPort = Convert.ToInt32(ConfigurationManager.AppSettings["plantuml.start_port"]);
 
        var instances = Convert.ToInt32(ConfigurationManager.AppSettings["plantuml.instances"]);
 
             
 
        var plantumlPath = ConfigurationManager.AppSettings["plantuml.path"];
 
        if (!File.Exists(plantumlPath))
 
            throw new ApplicationException("plantuml.jar not found in " + plantumlPath);
 
 
 
        for (int i = 0; i < instances; i++)
 
        {
 
            var argument = "-jar " + plantumlPath + " -ftp:" + (startPort + i);
 
            ProcessStartInfo pInfo = new ProcessStartInfo(javaPath, argument);
 
 
 
            pInfo.CreateNoWindow = true;
 
            pInfo.UseShellExecute = false;
 
            pInfo.RedirectStandardInput = true;
 
            pInfo.RedirectStandardError = true;
 
            pInfo.RedirectStandardOutput = true;
 
                 
 
            Process process = Process.Start(pInfo);
 
            Thread.Sleep(5000);
 
            _processes.Add(process);
 
 
 
            PlantUmlConnection connection = new PlantUmlConnection();
 
            connection.Connect(host, startPort + i);
 
            PlantUmlConnectionPool.Put(connection);
 
        }
 
    }

连接池的定义如下：

 
public static class PlantUmlConnectionPool
 
{
 
    private readonly static Queue_connectionPool = new Queue();
 
    private readonly static ManualResetEvent _availableEvent = new ManualResetEvent(false);
 
 
 
    public static PlantUmlConnection Get(TimeSpan timeout)
 
    {
 
        if (_connectionPool.Count == 0)
 
        {
 
            _availableEvent.Reset();
 
            if (_availableEvent.WaitOne(timeout))
 
            {
 
                return _connectionPool.Dequeue();
 
            }
 
            else
 
            {
 
                return null;
 
            }
 
        }
 
        else
 
        {
 
            lock (_connectionPool)
 
            {
 
                if (_connectionPool.Count == 0)
 
                    return null;
 
                else
 
                    return _connectionPool.Dequeue();                    
 
            }
 
        }
 
    }

算法如下：

检查连接池是否有空闲连接可用。
如果没有，等一段时间，直到出现可用的连接。
当超时设置已经过期仍没有可用连接时，返回 null。

把连接放回池中很简单:

 
public static void Put(PlantUmlConnection connection)
 
    {
 
        lock (_connectionPool)           
 
        _connectionPool.Enqueue(connection);       
 
        _availableEvent.Set();
 
    }

为了能维持一个到时刻运行的FTP服务器的连接，我使用了 Alex Pilotti 的 FTP 客户端（http://ftps.codeplex.com）。

 
public class PlantUmlConnection : IDisposable
 
{
 
    private FTPSClient client = new FTPSClient();
 
    private string _host;
 
    private int _port;
 
    public void Connect(string host, int port)
 
    {
 
        _host = host;
 
        _port = port;
 
        Debug.WriteLine("Connecting to FTP " + host + ":" + port);
 
        client.Connect(host, port,
 
            new NetworkCredential("yourUsername","yourPassword"),
 
            ESSLSupportMode.ClearText,
 
            null,
 
            null,
 
            0,
 
            0,
 
            0,
 
            3000,
 
            true,
 
            EDataConnectionMode.Active
 
        );
 
        Debug.WriteLine("Connection successful " + host + ":" + port);
 
    }

在FTP服务器初始化期间，对FTP服务器的每个实例来说，这个连接类的一个实例会建立一个打开的连接。

当需要生成一个图表的时候，它将一个包含图表代码文本的文本文件上传到FTP服务器，然后调用plantuml引擎根据该文件生成图表。

 
public void Upload(string remoteFileName, string content)
 
    {
 
        Debug.WriteLine("Uploading to " + _host + ":" + _port + "/" + remoteFileName);
 
        using (var stream = client.PutFile(remoteFileName))
 
        {
 
            byte[] data = Encoding.UTF8.GetBytes(content);
 
            stream.Write(data, 0, data.Length);
 
        }
 
        Debug.WriteLine("Successfully uploaded " + _host + ":" + _port + "/" + remoteFileName);
 
    }

然后你可以用 Download 函数来下载图表:

 
public void Download(string remoteFileName, ActionprocessStream)
 
    {
 
        Debug.WriteLine("Downloading from " + _host + ":" + _port + "/" + remoteFileName);
 
        using (var stream = client.GetFile(remoteFileName))
 
        {
 
            processStream(stream);
 
        }
 
 
 
        Debug.WriteLine("Successfully downloaded " + _host + ":" + _port + "/" + remoteFileName);
 
             
 
    }

这就是所有关于 PlantUML 服务器管理的部分。

在你自己的服务器上配置 codeuml

你可以在你自己的服务器上安装 codeUML 。在这种情况下，你需要认真按说明文件操作，因为要想让 PlantUML 引擎能够工作，需要一些细心的设置。为了你的方便，我把说明文件粘贴在这里，但请你注意查看最新的代码和说明文件。

 
There are several pre-requisits before you run this website. 
 
 
 
1. Install Java 
 
===============
 
Download and install latest Java. Make sure you know where
 
you are installing java. Usually it will be:
 
"c:\Program Files\Java\jre6\bin" 
 
 
 
1. Configure Graphviz
 
=============================================================
 
First, you have to install graphviz. 
 
http://www.graphviz.org/
 
Once you have installed, create a SYSTEM environment variable
 
called GRAPHVIZ_DOT which points to the dot.exe found in the 
 
graphviz bin folder. Usually it is:
 
c:\Program Files\Graphviz2.26.3\bin\dot.exe
 
Once you have done so, start a new command line window and run
 
this:
 
set graphviz_dot
 
If this shows you:
 
GRAPHVIZ_DOT=c:\Program Files\Graphviz2.26.3\bin\dot.exe
 
Then it is ok.
 
 
 
2. Installing on IIS 7+
 
=============================================================
 
If you are hosting this on a Windows Server, there are various
 
steps you need to do:
 
* First create a new app pool. 
 
* Create a new website or virtual directory that points to this
 
website.
 
* Give the app pool user (IIS AppPool\YourAppPoolName or NETWORK
 
SERVICE)
 
Read & Execute permission on the:
 
      ** Java folder. Eg. "c:\Program Files\Java\jre6\bin" 
 
      ** Graphviz bin folder: Eg c:\Program Files\Graphviz2.26.3\bin
 
      ** Within this website:
 
plantuml folder. 
 
 
 
3. Configuring web.config
 
==============================================================
 
You must fix the following entries before you can run:These are both absolute paths. No relative path allowed. 
 
 
 
4. Running and testing the website
 
============================================================
 
Run the Manage.aspx. 
 
 
 
It will take a while to start the page as it tries to launch java
 
and run the plantuml engine at the application_start event.
 
Once the site is up and running, click on Test button to test
 
a UML generation. If it works, you have configured everything 
 
properly.
 
Disable the Manage.aspx on production.

结论

Codeuml 作为一个Web应用程序，虽然较小，但它展示了如何建立高度灵敏的模拟 Visual Studio 样式的 IDE 的AJAX前端，和在服务器上针对有限资源创建昂贵的资源池来有效地生成输出。

本文地址：http://www.oschina.net/translate/codeuml-design-uml-diagrams-as-fast-as-you-can-code

原文地址：http://www.codeproject.com/Articles/397629/Codeuml-design-UML-diagrams-as-fast-as-you-can-cod

阳泉

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Codeuml —— 设计 UML 图表跟你编码一样快

原址：点击打开链接Codeuml —— 设计 UML 图表跟你编码一样快简介Codeuml是一个基于Web的UML设计工具，你可以用一种特别的语言编写图例，并快速输出图形。它比任何图形化设计工具（拖拽元素和点击鼠标连接元素）都来得更有效率。Codeuml使用开源引擎plantuml来从文本产生图形。你可以像编写代码一样迅速地设计图例。这个web应用展示了一些
复制链接

扫一扫

专栏目录