nomnoml

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="A tool for drawing sassy UML diagrams based on syntax. Provides instant feedback and has a customizable styling."> <title>nomnoml</title> <link rel="stylesheet" href="codemirror/codemirror.css"> <link rel="stylesheet" href="codemirror/solarized.nomnoml.css"> <link rel="stylesheet" href="nomnoml.css?v=1"> <link rel="shortcut icon" href="favicon.png"> <meta property="og:type" content="website"> <meta property="og:url" content="https://www.nomnoml.com"> <meta property="og:title" content="Nomnoml"> <meta property="og:description" content="A tool for drawing diagrams based on syntax. Supercharge your boxes and arrows."> <meta property="og:image" content="https://www.nomnoml.com/img/example.png"> </head> <body> <div class="wrap"> <canvas id="canvas"></canvas> <textarea id="textarea" spellcheck="false"></textarea> <div id="linenumbers"></div> <div id="canvas-panner"> <div canvas-tools></div> </div> <div id="reference" class="sidebar"> <div class="content"> <h2>Association types</h2> <b>association</b> -<br> <b>association</b> -><br> <b>association</b> <-><br> <b>dependency</b> --><br> <b>dependency</b> <--><br> <b>generalization</b> -:><br> <b>implementation</b> --:><br> <b>composition</b> +-<br> <b>composition</b> +-><br> <b>aggregation</b> o-<br> <b>aggregation</b> o-><br> <b>ball and socket</b> -o)<br> <b>ball and socket</b> o<-)<br> <b>ball and socket</b> ->o<br> <b>note</b> --<br> <b>hidden</b> -/-<br> <h2>Class diagram types</h2> <pre append-nomnoml-preview>[class]</pre> <pre append-nomnoml-preview>[<abstract> abstract]</pre> <pre append-nomnoml-preview>[<instance> instance]</pre> <pre append-nomnoml-preview>[<reference> reference]</pre> <pre append-nomnoml-preview>[<package> package|components]</pre> <pre append-nomnoml-preview>[<frame> frame|]</pre> <h2>Component diagram types</h2> <pre append-nomnoml-preview>[Component] - [<socket> socket]</pre> <pre append-nomnoml-preview>[<lollipop> lollipop] - [Component]</pre> <h2>Flow chart types</h2> <pre append-nomnoml-preview>[<start> start]</pre> <pre append-nomnoml-preview>[<end> end]</pre> <pre append-nomnoml-preview>[<state> state]</pre> <pre append-nomnoml-preview>[<choice> choice]</pre> <pre append-nomnoml-preview>[<sync> sync]</pre> <pre append-nomnoml-preview>[<input> input]</pre> <pre append-nomnoml-preview>[<sender> sender]</pre> <pre append-nomnoml-preview>[<receiver> receiver]</pre> <pre append-nomnoml-preview>[<transceiver> transceiver]</pre> <h2>Use case types</h2> <pre append-nomnoml-preview>[<actor> actor]</pre> <pre append-nomnoml-preview>[<usecase> usecase]</pre> <h2>Miscalleneous types</h2> <pre append-nomnoml-preview>[<note> note]</pre> <pre append-nomnoml-preview>[<label> label]</pre> <pre append-nomnoml-preview>[<hidden> hidden]</pre> <pre append-nomnoml-preview>[<database> database]</pre> <pre append-nomnoml-preview>[<pipe> pipe]</pre> <pre append-nomnoml-preview>[<table> table| a | 5 || b | 7]</pre> <h2>Comments</h2> Comments are supported at the start of a line <pre append-nomnoml-preview>//[commented] [not //commented]</pre> <h2>Id attribute</h2> Two distinct nodes can have the same display name with the id attribute. <pre append-nomnoml-preview>[<actor id=a>User] [<actor id=b>User] [a] -- [b]</pre> <h2>Directives</h2> #import: filename<br> #arrowSize: 1<br> #bendSize: 0.3<br> #direction: down | right<br> #gutter: 5<br> #edgeMargin: 0<br> #gravity: 1<br> #edges: hard | rounded<br> #background: transparent<br> #fill: #eee8d5; #fdf6e3<br> #fillArrows: false<br> #font: Calibri<br> #fontSize: 12<br> #leading: 1.35<br> #lineWidth: 3<br> #padding: 8<br> #spacing: 40<br> #stroke: #33322E<br> #title: filename<br> #zoom: 1<br> #acyclicer: greedy<br> #ranker: network-simplex | tight-tree | longest-path<br> <h2>Custom classifier styles</h2> <p>A directive that starts with "." define a classifier style. The style is written as a space separated list of modifiers and key/value pairs.</p> <pre append-nomnoml-preview>#.box: fill=#8f8 dashed #.blob: visual=ellipse title=bold [<box> GreenBox] [<blob> Blobby]</pre> <h3>Modifiers</h3> dashed<br> <h3>Key/value pairs</h3> fill=(any css color)<br><br> stroke=(any css color)<br><br> align=center<br> align=left<br><br> direction=right<br> direction=down<br><br> visual=actor<br> visual=class<br> visual=database<br> visual=ellipse<br> visual=end<br> visual=frame<br> visual=hidden<br> visual=input<br> visual=none<br> visual=note<br> visual=package<br> visual=pipe<br> visual=receiver<br> visual=rhomb<br> visual=roundrect<br> visual=sender<br> visual=start<br> visual=sync<br> visual=table<br> visual=transceiver<br> <h3>Style title and text body</h3> title=left,italic,bold<br> body=center,italic,bold<br> <h3>Text modifiers</h3> bold<br> center<br> italic<br> left<br> underline<br> </div> </div> <div id="about" class="sidebar"> <div class="content"> <h2>Welcome to nomnoml</h2> <p>A tool for drawing UML diagrams based on a simple syntax. <p>Try and edit the code on the left and watch the diagram change. Any changes are saved to the browser's <i>localStorage</i>, so your diagram should be here the next time, (but no guarantees).</p> <p>Created by <a href="mailto:daniel.kallin@gmail.com">Daniel Kallin</a> and hosted on <a href="https://github.com/skanaar/nomnoml" rel="noopener" target="_blank">GitHub</a> for your perusal.</p> <h2>Interaction</h2> <p>The canvas can be panned and zoomed by dragging and scrolling in the right hand third of the canvas. </p> <img src="img/interaction-tutorial.svg" alt="interaction tutorial"> <p>The editor supports a subset of <i>Sublime Text's</i> <a href="https://codemirror.net/demo/sublime.html" rel="noopener" target="_blank">keymappings</a>. </p> <h2>Usage</h2> <h3>Car has an Engine</h3> <pre append-nomnoml-preview>[Car]->[Engine]</pre> <h3>Car owns an arbitrary number of blemished</h3> <pre append-nomnoml-preview>[Car] +-> 0..* [RustPatch]</pre> <h3>Car knows its Manufacturer and is the parent of Pickup</h3> <pre append-nomnoml-preview>[Car]o->[Manufacturer] [Car]<:-[Pickup]</pre> <h3>Car has some attributes</h3> <pre append-nomnoml-preview>[Car|speed: Number;valves: Valve\[\] ]</pre> <h3>Engine has an operation</h3> <pre append-nomnoml-preview>[Engine||start()]</pre> <h3>Engine has internal parts</h3> <pre append-nomnoml-preview>[Engine| [Cylinder]->1[Piston] [Cylinder]->2[Valve] ]</pre> <h3>Engine depends on components</h3> <pre append-nomnoml-preview>[Engine] - [<socket>Tank] [Tank] -->o [Big Fuel Tank] </pre> <h3>Set font</h3> <pre append-nomnoml-preview>#font: Times Text with serifs </pre> <h3>Layout the diagram really tight</h3> <pre append-nomnoml-preview>#fontSize: 8 #spacing: 12 #padding: 3 [Lorem ipsum]-[dolor sit amet]</pre> <h3>Tables</h3> <pre append-nomnoml-preview>[<table>Fruits| Apples | 17 || Oranges | 4711 ]</pre> <h3>Create your own styles</h3> <pre append-nomnoml-preview>#.box: fill=#8f8 dashed [<box> GreenBox]</pre> <h3>Divide into multiple files</h3> <pre publish-as-file="blobby_styles">#.blob: fill=pink</pre> <pre append-nomnoml-preview>#import: blobby_styles [<blob> Blobby]</pre> </div> </div> <div id="export" class="sidebar"> <div class="content" export-menu></div> </div> <div id="files" class="sidebar"> <div class="content" file-menu></div> </div> <div menu> <div class="tools"> <a class="logo"><h1>nomnoml</h1>  </a> <a href="javascript:app.discardCurrentGraph()" title="Discard this diagram"> <svg width="24" height="24" viewBox="0 0 24 24"> <path d="M18 7h-1v-1c0-1.1-.8-2-2-2h-7c-1.1 0-2 .8-2 2v1h-1c-.5 0-1 .4-1 1s.4 1 1 1v8c0 2.2 1.7 4 4 4h5c2.2 0 4-1.7 4-4v-8c.5 0 1-.4 1-1s-.4-1-1-1zm-10-1h7v1h-7v-1zm8 11c0 1.1-.8 2-2 2h-5c-1.1 0-2-.8-2-2v-8h9v8zM8.5 10.5c-.2 0-.5.2-.5.5v6c0 .2.2.5.5.5s.5-.2.5-.5v-6c0-.2-.2-.5-.5-.5zM10.5 10.5c-.2 0-.5.2-.5.5v6c0 .2.2.5.5.5s.5-.2.5-.5v-6c0-.2-.2-.5-.5-.5zM12.5 10.5c-.2 0-.5.2-.5.5v6c0 .2.2.5.5.5s.5-.2.5-.5v-6c0-.2-.2-.5-.5-.5zM14.5 10.5c-.2 0-.5.2-.5.5v6c0 .2.2.5.5.5s.5-.2.5-.5v-6c0-.2-.2-.5-.5-.5z"/> </svg> </a> </div> </div> </div>  <script type="text/vnd.nomnoml.class" id="defaultGraph">[<start>start] -> [<state>plunder] -> [<choice>more loot] -> [start] [more loot] no ->[<end>e] [Pirate| [beard]--[parrot] [beard]-:>[foul mouth] ] [<table>mischief| bawl | sing || yell | drink ] [<abstract>Marauder]<:--[Pirate] [Pirate] - 0..7[mischief] [<actor id=sailor>Jolly;Sailor] [sailor]->[Pirate] [sailor]->[rum] [Pirate]-> *[rum|tastiness: Int|swig()] </script> <script src="codemirror/codemirror-compressed.js"></script> <script src="codemirror/nomnoml.codemirror-mode.js"></script> <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script> <script crossorigin src="https://unpkg.com/jszip@3.5.0/dist/jszip.min.js"></script> <script src="dist/webapp.js"></script> <script> WebApp.bootstrap(CodeMirror) </script> <script src="additionals.js"></script> </body> </html>