Skip to content

Commit cbc60f7

Browse files
gcclinuxgcclinux
committed
added planUML
1 parent 186c3ac commit cbc60f7

16 files changed

+1501
-10
lines changed

‎docs/NOMNOML-GUIDE.md‎

Lines changed: 254 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,254 @@
1+
# Offline UML Support - Nomnoml Implementation
2+
3+
## What Changed?
4+
5+
We've switched from PlantUML (online-only) to **Nomnoml** (offline JavaScript library) for UML diagram rendering.
6+
7+
## Why Nomnoml?
8+
9+
✅ **100% Offline** - No internet connection required
10+
✅ **Lightweight** - Pure JavaScript, ~20KB (vs Java runtime + PlantUML JAR ~10MB+)
11+
✅ **Fast** - Renders instantly in the browser
12+
✅ **No Dependencies** - No Java, no external servers
13+
✅ **SVG Output** - Clean, scalable vector graphics
14+
15+
## Nomnoml Syntax
16+
17+
Nomnoml uses a simpler, more concise syntax than PlantUML:
18+
19+
### Basic Structure
20+
21+
```plantuml
22+
#title: Your Diagram Title
23+
#direction: down|right|left|up
24+
25+
[Class Name]
26+
[Class A] -> [Class B]
27+
```
28+
29+
### Directives
30+
31+
- `#title: Title Text` - Sets diagram title
32+
- `#direction: down` - Sets layout direction (down, right, up, left)
33+
- `#arrowSize: 1` - Arrow size (0.5 to 2)
34+
- `#bendSize: 0.3` - Curve radius
35+
- `#fontSize: 12` - Font size
36+
- `#leading: 1.25` - Line height
37+
- `#lineWidth: 3` - Line thickness
38+
- `#padding: 8` - Box padding
39+
- `#spacing: 40` - Element spacing
40+
- `#stroke: #33322E` - Line color
41+
- `#fill: #eee8d5` - Background color
42+
43+
### Class Diagrams
44+
45+
```plantuml
46+
#title: Class Diagram
47+
#direction: down
48+
49+
[ClassName|
50+
attribute1: type;
51+
attribute2: type|
52+
method1();
53+
method2()
54+
]
55+
```
56+
57+
**Relationships:**
58+
- `[A] -> [B]` - Association
59+
- `[A] <:- [B]` - Inheritance (B inherits from A)
60+
- `[A] <-> [B]` - Bidirectional
61+
- `[A] o-> [B]` - Aggregation
62+
- `[A] o-o [B]` - Composition
63+
64+
### Sequence Diagrams
65+
66+
```plantuml
67+
#title: Sequence Flow
68+
#direction: right
69+
70+
[User] -> [Browser]
71+
[Browser] -> [Server]
72+
[Server] --> [Browser]
73+
[Browser] --> [User]
74+
```
75+
76+
**Arrows:**
77+
- `->` - Solid arrow
78+
- `-->` - Dashed arrow
79+
- `<->` - Bidirectional
80+
81+
### Use Case Diagrams
82+
83+
```plantuml
84+
#title: Use Cases
85+
86+
[<actor> User]
87+
[Login]
88+
[View Profile]
89+
90+
[User] - [Login]
91+
[User] - [View Profile]
92+
```
93+
94+
**Visual Types:**
95+
- `[<actor> Name]` - Stick figure
96+
- `[<usecase> Name]` - Oval
97+
- `[<package> Name]` - Package/container
98+
- `[<database> Name]` - Database symbol
99+
- `[<start> Name]` - Start circle
100+
- `[<end> Name]` - End circle
101+
- `[<choice> Name]` - Decision diamond
102+
- `[<frame> Name]` - Frame/boundary
103+
104+
### Component Diagrams
105+
106+
```plantuml
107+
#title: System Components
108+
109+
[<package> Frontend|
110+
[React App]
111+
[Components]
112+
]
113+
114+
[<package> Backend|
115+
[API]
116+
[Logic]
117+
]
118+
119+
[<database> DB|
120+
[PostgreSQL]
121+
]
122+
123+
[React App] -> [Components]
124+
[React App] --> [API]
125+
[API] -> [Logic]
126+
[Logic] -> [PostgreSQL]
127+
```
128+
129+
### Activity/State Diagrams
130+
131+
```plantuml
132+
#title: Process Flow
133+
#direction: right
134+
135+
[<start> Start] -> [Init]
136+
[Init] -> [<choice> Valid?]
137+
[Valid?] yes -> [Process]
138+
[Valid?] no -> [Error]
139+
[Process] -> [<end> End]
140+
[Error] -> [<end> End]
141+
```
142+
143+
## Comparison: PlantUML vs Nomnoml
144+
145+
| Feature | PlantUML | Nomnoml |
146+
|---------|----------|---------|
147+
| **Offline** | ❌ Requires server or Java | ✅ Pure JavaScript |
148+
| **Size** | 10MB+ (with Java) | ~20KB |
149+
| **Speed** | Slower (server call or JVM) | Instant |
150+
| **Syntax** | Complex, verbose | Simple, concise |
151+
| **Diagrams** | 20+ types | Core UML types |
152+
| **Customization** | Extensive | Moderate |
153+
| **Best For** | Complex enterprise UML | Quick, clean diagrams |
154+
155+
## Migration Guide
156+
157+
### PlantUML to Nomnoml Conversion
158+
159+
#### Class Diagram
160+
161+
**PlantUML:**
162+
```
163+
@startuml
164+
class Animal {
165+
+int age
166+
+isMammal()
167+
}
168+
Animal <|-- Duck
169+
@enduml
170+
```
171+
172+
**Nomnoml:**
173+
```
174+
[Animal|
175+
age: int|
176+
isMammal()
177+
]
178+
[Animal] <:- [Duck]
179+
```
180+
181+
#### Sequence Diagram
182+
183+
**PlantUML:**
184+
```
185+
@startuml
186+
User -> Server: Request
187+
Server --> User: Response
188+
@enduml
189+
```
190+
191+
**Nomnoml:**
192+
```
193+
[User] -> [Server]
194+
[Server] --> [User]
195+
```
196+
197+
## Advanced Features
198+
199+
### Nested Containers
200+
201+
```plantuml
202+
[<package> Outer|
203+
[<package> Inner|
204+
[Component A]
205+
[Component B]
206+
]
207+
[Component C]
208+
]
209+
```
210+
211+
### Custom Styles
212+
213+
```plantuml
214+
#stroke: #4488ff
215+
#fill: #fff8dc
216+
#fontSize: 14
217+
#padding: 16
218+
219+
[Styled Component]
220+
```
221+
222+
### Multiple Compartments
223+
224+
```plantuml
225+
[ClassName|
226+
Properties|
227+
Methods|
228+
Events
229+
]
230+
```
231+
232+
## Tips for Better Diagrams
233+
234+
1. **Use Titles**: Always add `#title:` for context
235+
2. **Set Direction**: Choose layout direction for clarity
236+
3. **Keep it Simple**: Don't overcrowd diagrams
237+
4. **Use Visual Types**: `<actor>`, `<database>`, etc. for clarity
238+
5. **Consistent Spacing**: Use `#spacing:` for uniform look
239+
6. **Color Coding**: Use `#stroke:` and `#fill:` for emphasis
240+
241+
## Resources
242+
243+
- [Nomnoml Official Site](https://nomnoml.com/)
244+
- [Nomnoml GitHub](https://github.com/skanaar/nomnoml)
245+
- [Try Nomnoml Online](https://nomnoml.com/)
246+
- [Syntax Reference](https://github.com/skanaar/nomnoml#directives)
247+
248+
## Examples in EasyEdit
249+
250+
See `UML-Examples.md` for working examples of all diagram types!
251+
252+
---
253+
254+
**Bottom Line**: Nomnoml gives you 90% of PlantUML's functionality with 1% of the complexity and size - perfect for an offline Electron app! 🎉

‎docs/OFFLINE-UML-UPDATE.md‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
# 🎉 UML Feature - Now 100% Offline!
2+
3+
## Summary of Changes
4+
5+
Your EasyEdit application now has **fully offline UML diagram support** using Nomnoml!
6+
7+
### What Was Fixed
8+
9+
❌ **Before**: PlantUML required internet connection
10+
✅ **After**: Nomnoml works completely offline
11+
12+
### Package Changes
13+
14+
**Removed:**
15+
- `plantuml-encoder` (online-only)
16+
- `@types/plantuml-encoder`
17+
18+
**Added:**
19+
- `nomnoml` (~20KB, pure JavaScript, offline)
20+
21+
### Key Benefits
22+
23+
1. **✅ Works Offline** - No internet required
24+
2. **✅ Lightweight** - Just ~20KB vs Java runtime (10MB+)
25+
3. **✅ Instant Rendering** - Pure JavaScript, no server calls
26+
4. **✅ Same UML Button** - UI unchanged, dropdown still works
27+
5. **✅ Simpler Syntax** - Easier to write and read
28+
6. **✅ SVG Output** - Clean, scalable graphics
29+
30+
## Files Modified
31+
32+
### Core Rendering
33+
- `src/components/PreviewComponent.tsx` - Switched to nomnoml.renderSvg()
34+
- `src/insertSave.ts` - Updated HTML export
35+
- `src/mainHandler.ts` - Updated HTML export
36+
37+
### Templates
38+
- `src/insertUML.ts` - All 6 templates updated to nomnoml syntax
39+
- `UML-Examples.md` - Updated with nomnoml examples
40+
41+
### Documentation
42+
- `NOMNOML-GUIDE.md` - Complete syntax reference (NEW)
43+
- `UML-IMPLEMENTATION-SUMMARY.md` - Updated for nomnoml
44+
45+
## Quick Test
46+
47+
1. **Run the app**: `npm run app`
48+
2. **Disconnect internet** (or use airplane mode)
49+
3. **Click "UML ▾"** button
50+
4. **Select any diagram type**
51+
5. **See it render instantly** - No internet needed!
52+
53+
## Syntax Example
54+
55+
```plantuml
56+
#title: My Class Diagram
57+
#direction: down
58+
59+
[User|
60+
username: string;
61+
email: string|
62+
login();
63+
logout()
64+
]
65+
66+
[Admin]
67+
[User] <:- [Admin]
68+
```
69+
70+
This renders instantly as an SVG diagram in the preview panel!
71+
72+
## Comparison
73+
74+
| Aspect | PlantUML (Before) | Nomnoml (Now) |
75+
|--------|-------------------|---------------|
76+
| **Internet** | Required | Not needed |
77+
| **Size** | Huge (Java + JAR) | Tiny (~20KB) |
78+
| **Speed** | Slow (server/JVM) | Instant (JS) |
79+
| **Platform** | Needs Java | Pure browser |
80+
| **Syntax** | Complex | Simple |
81+
82+
## Migration Notes
83+
84+
The syntax changed slightly, but it's simpler:
85+
86+
**PlantUML:**
87+
```
88+
@startuml
89+
class Animal {
90+
+age: int
91+
}
92+
@enduml
93+
```
94+
95+
**Nomnoml:**
96+
```
97+
[Animal|
98+
age: int
99+
]
100+
```
101+
102+
Your existing mermaid diagrams are unaffected and still work the same!
103+
104+
## Next Steps
105+
106+
1. **Test offline** - Verify it works without internet
107+
2. **Try all 6 diagram types** - Class, Sequence, Use Case, Activity, Component, State
108+
3. **Export to HTML** - Diagrams are embedded offline
109+
4. **Read NOMNOML-GUIDE.md** - Full syntax reference
110+
111+
---
112+
113+
**Status**: ✅ Production Ready & Fully Offline
114+
115+
Your application is now lighter, faster, and works anywhere without internet! 🚀

0 commit comments

Comments
 (0)