v0.4.0

bytedance/flowgram.aiv0.4.0Aug 15, 2025by sanmaopep

AI Summary

This release v0.4.0 of flowgram.ai introduces vertical line rendering support for free-layout and optimizes slot UX for fixed-layout. It includes a breaking change where the 'vertical' and 'isVerticalLine' line configurations were removed and replaced with more flexible options like 'shrink', 'curvature', 'style', 'className', and 'strokeWidth'.

Key Highlights

  • Free Layout now supports vertical line rendering with new line UI state properties
  • Fixed Layout slot UX has been optimized with improved visual design
  • Breaking change: Removed 'vertical' and 'isVerticalLine' line configurations due to ambiguity in diagonal connections
  • Added new line properties: 'shrink', 'curvature', 'style', 'className', 'strokeWidth'

Breaking Changes

  • Removed 'vertical' and 'isVerticalLine' configuration from lines in free-layout - these have been replaced with more flexible options

New Features

  • Free Layout: Vertical line render support
  • Free Layout: New line uiState properties (shrink, curvature, style, className, strokeWidth)
  • Fixed Layout: Slot UX optimization

Full Release Notes

## What's Changed
* feat(free-layout): vertical line render support, line uiState remove "vertical" and add "shrink" "curvature" "style" "className" "strokeWidth" etc by @xiamidaxia in https://github.com/bytedance/flowgram.ai/pull/656
* feat(fixed-layout): optimize slot ux by @sanmaopep in https://github.com/bytedance/flowgram.ai/pull/678

## Highlight
| Title | Related Images |
| ---- | ---- |
| **Fix Layout: Slot UX optimize** | <img width="500" alt="image" src="https://github.com/user-attachments/assets/80593921-d177-4bdd-b430-2f80b1248cfe" /><br/><img width="500" alt="image" src="https://github.com/user-attachments/assets/c1db7de8-218c-48e4-9808-c5b4ca3821c0" /> |
| **Free Layout: Vertical Line (Breaking Change)** |  Remove the "vertical" and "isVerticalLine" configuration of the lines, as it would result in scenarios such as "right -> top" and "bottom -> left", making it difficult to clearly define whether it is horizontal or vertical. <img width="500" height="1298" alt="image" src="https://github.com/user-attachments/assets/ebf437bc-8865-40a7-bcd5-64bb710913f6" /> |

**Full Changelog**: https://github.com/bytedance/flowgram.ai/compare/v0.3.6...v0.4.0