<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
    <title>Uml on bramp.net</title>
    <link>https://blog.bramp.net/</link>
    <description>Recent content in Uml on bramp.net</description>
    <generator>Hugo -- gohugo.io</generator>
    <language>en-GB</language>
    <lastBuildDate>Sat, 23 Mar 2013 00:00:00 +0000</lastBuildDate>
    <atom:link href="https://blog.bramp.net/tags/uml/" rel="self" type="application/rss+xml" />
    
    <item>
      <title>Draw UML Sequence Diagrams with Javascript</title>
      <link>https://blog.bramp.net/post/2013/03/23/draw-uml-sequence-diagrams-with-javascript/</link>
      <pubDate>Sat, 23 Mar 2013 00:00:00 +0000</pubDate>
      
      <guid>https://blog.bramp.net/post/2013/03/23/draw-uml-sequence-diagrams-with-javascript/</guid>
      <description><p>I’m happy to announce one of my projects, <a href="https://bramp.github.io/js-sequence-diagrams/">js-sequence-diagrams</a>. This uses Javascript to draw UML sequence diagrams in SVG format. Here is an example:</p>
<div class="text-center">
    <a href="https://bramp.github.io/js-sequence-diagrams/">
		<img src="sample-with-editor.png" alt="js-sequence-diagram example" width="865" height="333" />
	</a>
</div>
<p>You can alter the diagram in real time, and I even have a simple jQuery plugin to make this easy to use on your own sites.</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="ni">&amp;lt;</span>script src=&#34;sequence-diagram-min.js&#34;<span class="ni">&amp;gt;&amp;lt;</span>/script<span class="ni">&amp;gt;</span>
</span></span><span class="line"><span class="cl"><span class="ni">&amp;lt;</span>div class=&#34;diagram&#34;<span class="ni">&amp;gt;</span>A-<span class="ni">&amp;gt;</span>B: Message<span class="ni">&amp;lt;</span>/div<span class="ni">&amp;gt;</span>
</span></span><span class="line"><span class="cl"><span class="ni">&amp;lt;</span>script<span class="ni">&amp;gt;</span>
</span></span><span class="line"><span class="cl">$(&#34;.diagram&#34;).sequenceDiagram({theme: <span class="ni">&amp;#39;</span>hand<span class="ni">&amp;#39;</span>});
</span></span><span class="line"><span class="cl"><span class="ni">&amp;lt;</span>/script<span class="ni">&amp;gt;</span>
</span></span></code></pre></div></description>
    </item>
    
  </channel>
</rss>
