├── .gitignore ├── .prettierignore ├── .prettierrc.json ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── additionals.js ├── api └── image.js ├── build ├── build-codemirror.js └── char-widths.html ├── changelog.md ├── codemirror ├── codemirror-compressed.js ├── codemirror.css ├── nomnoml.codemirror-mode.js └── solarized.nomnoml.css ├── dist ├── nomnoml-cli.js └── nomnoml.js ├── favicon.png ├── img ├── example.png └── interaction-tutorial.svg ├── index.d.ts ├── index.html ├── nomnoml.css ├── package-lock.json ├── package.json ├── src ├── Graphics.ts ├── GraphicsCanvas.ts ├── GraphicsSvg.ts ├── domain.ts ├── index.ts ├── layouter.ts ├── linearParse.ts ├── nomnoml.ts ├── parser.ts ├── renderer.ts ├── rollup.config.js ├── terminators.ts ├── tsconfig.json ├── util.ts ├── vector.ts └── visuals.ts ├── test ├── assert.js ├── import-test.nomnoml ├── importee.nomnoml ├── index.html ├── test.comments.js ├── test.layout.js ├── test.misc.js ├── test.parse-directives.js ├── test.parse-nodes.js ├── test.parse-relations.js ├── test.parser.js ├── test.samples.js └── utils.js ├── vercel.json └── webapp ├── App.ts ├── CanvasPanner.ts ├── CanvasTools.tsx ├── DailyTip.tsx ├── DevEnv.ts ├── DownloadLinks.ts ├── ExportMenu.tsx ├── FileMenu.tsx ├── FileSystem.ts ├── HoverMarker.ts ├── Icon.tsx ├── Menu.tsx ├── Observable.ts ├── Route.ts ├── SystemBanners.tsx ├── TerminalBanners.tsx ├── custom-elements.d.ts ├── declarations.ts ├── index.ts ├── react-util.ts ├── rollup.config.js ├── tsconfig.json ├── typicons.ts └── util.ts /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | 3 | commercial/ 4 | nomnoml.sublime-project 5 | nomnoml.sublime-workspace 6 | dist/nomnoml.compiled.js 7 | dist/nomnoml-core-parser.js 8 | dist/core-parser.js 9 | dist/webapp.js 10 | deploy.sh 11 | 12 | cache/ 13 | output.* 14 | 15 | .vercel 16 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | *.css -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "singleQuote": true, 4 | "printWidth": 100, 5 | "trailingComma": "es5" 6 | } 7 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to nomnoml 2 | 3 | To start contributing you will need to fork the repo on github and clone it first. 4 | 5 | Unit tests use the node-native `node:test` module so at least **Node v19.6.0** is required for development. 6 | 7 | ## Building 8 | 9 | Running `npm run build` will compile the nomnoml library, the webapp and run all tests. 10 | 11 | ## Testing 12 | 13 | Before committing and before making a pull request make sure that all unit tests and usecase tests are ok. Here is a good procedure: 14 | 15 | 1. Run `npm run build` 16 | 2. Check `index.html` 17 | 3. Check `test/index.html` 18 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2020 Daniel Kallin 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in 11 | all copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | nomnoml 2 | [![npm version](https://badge.fury.io/js/nomnoml.svg)](https://badge.fury.io/js/nomnoml) 3 | [![Known Vulnerabilities](https://snyk.io/test/npm/nomnoml/badge.svg)](https://snyk.io/test/npm/nomnoml) 4 | [![web site](https://img.shields.io/badge/web-nomnoml.com-brightgreen)](https://www.nomnoml.com) 5 | ======= 6 | 7 | Hello, this is [nomnoml](http://www.nomnoml.com), a tool for drawing UML diagrams based on a simple syntax. It tries to keep its syntax visually as close as possible to the generated UML diagram without resorting to ASCII drawings. 8 | 9 | Created by [Daniel Kallin](https://github.com/skanaar) with help from a group of [contributors](https://github.com/skanaar/nomnoml/graphs/contributors). 10 | 11 | ## Library 12 | 13 | The [nomnoml](https://www.nomnoml.com) javascript library can render diagrams on your web page. The only dependency is [graphre](https://github.com/skanaar/graphre). Install nomnoml using either _npm_ or good old script inclusion. 14 | 15 | ## SVG output in NodeJS 16 | 17 | ``` 18 | npm install nomnoml 19 | ``` 20 | 21 | ```js 22 | var nomnoml = require('nomnoml') 23 | var src = '[nomnoml] is -> [awesome]' 24 | console.log(nomnoml.renderSvg(src)) 25 | ``` 26 | 27 | In the SVG output the node name is attached to SVG shapes and `` containers with `data-name` attribute. You can use this to implement interactive diagrams. 28 | 29 | ```js 30 | document.querySelector('svg').onclick = function (e) { 31 | console.log(e.target.closest('g[data-name]')?.attributes['data-name']) 32 | } 33 | ``` 34 | 35 | ## HTML Canvas rendering target 36 | 37 | ```html 38 | 39 | 40 | 41 | 42 | 47 | ``` 48 | 49 | ## Command Line Interface 50 | 51 | `npx nomnoml` exposes the SVG renderer with a command-line interface. This mode also supports the `#import: ` directive for dividing complex diagrams into multiple files. 52 | 53 | ``` 54 | npx nomnoml input-file.noml 55 | ``` 56 | 57 | ## Web application 58 | 59 | The [nomnoml](http://www.nomnoml.com) web application is a simple editor with a live preview. It is purely client-side and uses your browser's _localStorage_, so your diagram should be here the next time you visit (but no guarantees). 60 | 61 | ### Example 62 | 63 | This is how the Decorator pattern can look in nomnoml syntax: 64 | 65 | [Decorator pattern| 66 | [Component||+ operation()] 67 | [Client] depends --> [Component] 68 | [Decorator|- next: Component] 69 | [Decorator] decorates -- [ConcreteComponent] 70 | [Component] <:- [Decorator] 71 | [Component] <:- [ConcreteComponent] 72 | ] 73 | 74 | ### Association types 75 | 76 | - association 77 | -> association 78 | <-> association 79 | --> dependency 80 | <--> dependency 81 | -:> generalization 82 | <:- generalization 83 | --:> implementation 84 | <:-- implementation 85 | +- composition 86 | +-> composition 87 | o- aggregation 88 | o-> aggregation 89 | -o) ball and socket 90 | o<-) ball and socket 91 | ->o ball and socket 92 | -- note 93 | -/- hidden 94 | 95 | ### Classifier types 96 | 97 | [name] 98 | [ name] 99 | [ name] 100 | [ name] 101 | [ name] 102 | [ name] 103 | [ name] 104 | [ name] 105 | [ name] 106 | [ name] 107 | [ name] 108 | [ name] 109 | [ name] 110 | [ name] 111 | [ name] 112 | [ lollipop] 113 | [ name] 114 | [ socket] 115 | [ name] 116 | [ name] 117 | [ name] 118 | [ name] 119 | [