Add Opacity to Untouched Nodes
- Dominant language
- TypeScript
- Stars
- 81
- Forks
- 11
- PR merge metrics
- No merged PRs in 30d
Description
## Description
When reviewing flow changes in a git diff context, it can be challenging to quickly focus on the modified elements. Adding opacity to untouched nodes would make the changes even more apparent during code review.
## Proposed Solution
Add 50% opacity to all nodes that weren't added, modified, or deleted in the diff. Implementation varies by diagram tool:
### Mermaid
- Add `opacity:.50` to the style class for untouched nodes
### Graphviz
- Modify the fillcolor attribute to include alpha channel
- Change from: `fillcolor="#F9548A"`
- To: `fillcolor="#F9548A80"` (80 = 50% opacity)
### PlantUML
- Similar to Graphviz, add alpha channel to colors
- Change from: `#F9548A`
- To: `#F9548A80`
## Expected Behavior
- Added nodes: Full opacity + green border
- Modified nodes: Full opacity + orange border
- Deleted nodes: Full opacity + red border
- Unchanged nodes: 50% opacity, no special border
## Benefits
- Easier visual distinction between changed and unchanged elements
- Faster code review process
- Better focus on the actual changes in complex flows
## Example
## Implementation Notes
- This change would only affect diff mode
- The opacity modification should be applied after determining node diff status
- We may need to change the flow parsing logic and introduce a new diff status enum - `UNCHANGED`
## Related Files
- src/main/mermaid_generator.ts
- src/main/graphviz_generator.ts
- src/main/plantuml_generator.ts
- src/main/uml_generator.ts
Contributor guide
Assessment
This issue has not been assessed yet.