About Worse Nomnoml

What is this?

Worse Nomnoml is an experimental implementation of the Nomnoml UML diagram tool. Despite the self-deprecating name, this project aims to explore improvements to the original tool while serving as a learning experience in React development.

Features

• Diagram Editor: Create and edit UML diagrams using the Nomnoml syntax
• Natural Language: Add notes and descriptions to your diagrams
• Soon, I am planning to add my favourite feature: natural language input
• Structure Code: Automatically organize your diagram code
  • This is entirely a preference of mine when writing a new diagram, but I quite enjoy having the components and flows separately organized. Helps with styling and keeps the flows clean. Pressing the 'Organize' button above the editor will let you do just that.
• Live Preview: See your diagram update in real-time as you type
  • As you might have guessed, this uses Nomnoml in the background to render the SVG diagram.
• File Operations: Create, save, and load diagram files
• Export Options: Download your diagrams as SVG or PNG

Why "Worse"?

The name is a humble acknowledgment that this is an experimental project that doesn't (yet) have all the features and polish of the original Nomnoml. It's a work in progress and a learning journey.

Getting Started

To create a basic diagram:

[Customer]->[Order]
[Order]+->[LineItem]
[Customer]->[Feedback]

Nomnoml Syntax

Association types

-    association
->   association
<->  association
-->  dependency
<--> dependency
-:>  generalization
<:-  generalization
--:> implementation
<:-- implementation
+-   composition
+->  composition
o-   aggregation
o->  aggregation
-o)  ball and socket
o<-) ball and socket
->o  ball and socket
--   note
-/-  hidden

Classifier types

[name]
[<abstract> name]
[<instance> name]
[<reference> name]
[<note> name]
[<package> name]
[<frame> name]
[<database> name]
[<pipe> name]
[<start> name]
[<end> name]
[<state> name]
[<choice> name]
[<sync> name]
[<input> name]
[<lollipop> lollipop]
[<sender> name]
[<socket> socket]
[<receiver> name]
[<transceiver> name]
[<actor> name]
[<usecase> name]
[<label> name]
[<hidden> name]
[<table> name| a | 5 || b | 7]

Comments

Comments are supported at the start of a line.

//[commented]