Initial commit: Brachnha Insight project setup
- Next.js 14+ with App Router and TypeScript - Tailwind CSS and ShadCN UI styling - Zustand state management - Dexie.js for IndexedDB (local-first data) - Auth.js v5 for authentication - BMAD framework integration Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
127
_bmad/core/resources/excalidraw/excalidraw-helpers.md
Normal file
127
_bmad/core/resources/excalidraw/excalidraw-helpers.md
Normal file
@@ -0,0 +1,127 @@
|
||||
# Excalidraw Element Creation Guidelines
|
||||
|
||||
## Text Width Calculation
|
||||
|
||||
For text elements inside shapes (labels):
|
||||
|
||||
```
|
||||
text_width = (text.length × fontSize × 0.6) + 20
|
||||
```
|
||||
|
||||
Round to nearest 10 for grid alignment.
|
||||
|
||||
## Element Grouping Rules
|
||||
|
||||
**CRITICAL:** When creating shapes with labels:
|
||||
|
||||
1. Generate unique IDs:
|
||||
- `shape-id` for the shape
|
||||
- `text-id` for the text
|
||||
- `group-id` for the group
|
||||
|
||||
2. Shape element must have:
|
||||
- `groupIds: [group-id]`
|
||||
- `boundElements: [{type: "text", id: text-id}]`
|
||||
|
||||
3. Text element must have:
|
||||
- `containerId: shape-id`
|
||||
- `groupIds: [group-id]` (SAME as shape)
|
||||
- `textAlign: "center"`
|
||||
- `verticalAlign: "middle"`
|
||||
- `width: calculated_width`
|
||||
|
||||
## Grid Alignment
|
||||
|
||||
- Snap all `x`, `y` coordinates to 20px grid
|
||||
- Formula: `Math.round(value / 20) * 20`
|
||||
- Spacing between elements: 60px minimum
|
||||
|
||||
## Arrow Creation
|
||||
|
||||
### Straight Arrows
|
||||
|
||||
Use for forward flow (left-to-right, top-to-bottom):
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "arrow",
|
||||
"startBinding": {
|
||||
"elementId": "source-shape-id",
|
||||
"focus": 0,
|
||||
"gap": 10
|
||||
},
|
||||
"endBinding": {
|
||||
"elementId": "target-shape-id",
|
||||
"focus": 0,
|
||||
"gap": 10
|
||||
},
|
||||
"points": [[0, 0], [distance_x, distance_y]]
|
||||
}
|
||||
```
|
||||
|
||||
### Elbow Arrows
|
||||
|
||||
Use for upward flow, backward flow, or complex routing:
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "arrow",
|
||||
"startBinding": {...},
|
||||
"endBinding": {...},
|
||||
"points": [
|
||||
[0, 0],
|
||||
[intermediate_x, 0],
|
||||
[intermediate_x, intermediate_y],
|
||||
[final_x, final_y]
|
||||
],
|
||||
"elbowed": true
|
||||
}
|
||||
```
|
||||
|
||||
### Update Connected Shapes
|
||||
|
||||
After creating arrow, update `boundElements` on both connected shapes:
|
||||
|
||||
```json
|
||||
{
|
||||
"id": "shape-id",
|
||||
"boundElements": [
|
||||
{ "type": "text", "id": "text-id" },
|
||||
{ "type": "arrow", "id": "arrow-id" }
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## Theme Application
|
||||
|
||||
Theme colors should be applied consistently:
|
||||
|
||||
- **Shapes**: `backgroundColor` from theme primary fill
|
||||
- **Borders**: `strokeColor` from theme accent
|
||||
- **Text**: `strokeColor` = "#1e1e1e" (dark text)
|
||||
- **Arrows**: `strokeColor` from theme accent
|
||||
|
||||
## Validation Checklist
|
||||
|
||||
Before saving, verify:
|
||||
|
||||
- [ ] All shapes with labels have matching `groupIds`
|
||||
- [ ] All text elements have `containerId` pointing to parent shape
|
||||
- [ ] Text width calculated properly (no cutoff)
|
||||
- [ ] Text alignment set (`textAlign` + `verticalAlign`)
|
||||
- [ ] All elements snapped to 20px grid
|
||||
- [ ] All arrows have `startBinding` and `endBinding`
|
||||
- [ ] `boundElements` array updated on connected shapes
|
||||
- [ ] Theme colors applied consistently
|
||||
- [ ] No metadata or history in final output
|
||||
- [ ] All IDs are unique
|
||||
|
||||
## Optimization
|
||||
|
||||
Remove from final output:
|
||||
|
||||
- `appState` object
|
||||
- `files` object (unless images used)
|
||||
- All elements with `isDeleted: true`
|
||||
- Unused library items
|
||||
- Version history
|
||||
Reference in New Issue
Block a user