Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 52 additions & 0 deletions .agent/workflows/svg_flowchart_guidelines.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
---
description: SVG flowchart and data visualization best practices to avoid common rendering issues
---

# SVG Flowchart & Data Visualization Guidelines

## Arrow Marker Best Practices

1. **`refX` should be less than the arrowhead length.** If your arrowhead path is `M0,0 L0,6 L9,3 z` (length=9), set `refX` to `5` (not `9`). A `refX` equal to the arrowhead length causes the tip to land exactly at the path endpoint, which gets hidden behind destination nodes.

2. **End arrow paths 5-10px before the target node boundary.** This leaves room for the arrowhead to be visible and not obscured by the node's fill.

3. **Use `markerUnits="strokeWidth"`** for consistent arrowhead sizing regardless of stroke width changes.

## SVG viewBox Sizing

1. **Always add 30-50px padding** below the last element in your viewBox height. If the last element ends at y=940 with ry=35, set viewBox height to at least `1000`.

2. **For dynamic data tables**, calculate viewBox height based on number of rows:

```
viewBox height = header_height + (row_count × row_height) + summary_text_spacing + padding
```

Comment on lines +19 to +24

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

フェンス前後の空行が必要です(MD031)。

markdownlint の指摘どおり、フェンスの前後に空行を入れてください。

🧹 修正案
-2. **For dynamic data tables**, calculate viewBox height based on number of rows:
-    ```
-    viewBox height = header_height + (row_count × row_height) + summary_text_spacing + padding
-    ```
+2. **For dynamic data tables**, calculate viewBox height based on number of rows:
+
+    ```
+    viewBox height = header_height + (row_count × row_height) + summary_text_spacing + padding
+    ```
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
2. **For dynamic data tables**, calculate viewBox height based on number of rows:
```
viewBox height = header_height + (row_count × row_height) + summary_text_spacing + padding
```
2. **For dynamic data tables**, calculate viewBox height based on number of rows:
🧰 Tools
🪛 markdownlint-cli2 (0.20.0)

[warning] 20-20: Fenced code blocks should be surrounded by blank lines

(MD031, blanks-around-fences)

🤖 Prompt for AI Agents
In @.agent/workflows/svg_flowchart_guidelines.md around lines 19 - 23, The
fenced code block containing "viewBox height = header_height + (row_count ×
row_height) + summary_text_spacing + padding" violates MD031; add a blank line
immediately before the opening ``` and a blank line immediately after the
closing ``` so the fence is separated from surrounding text (update the markdown
around that fenced block in svg_flowchart_guidelines.md).

## Text Overlap Prevention

1. **Summary text below data tables**: Position summary text at least `30px` below the last row's bottom edge (y + height), not at a fixed y coordinate.

2. **For N data rows at spacing S starting at Y0**: Last row bottom = `Y0 + (N-1) × S + row_height`. Summary text y should be `last_row_bottom + 30`.

## Prism.js Copy Button with Tailwind CSS

Tailwind's preflight CSS resets button styles. Override with `!important`:

```css
.code-toolbar > .toolbar {
opacity: 1 !important;
}
.code-toolbar > .toolbar .toolbar-item {
display: inline-block !important;
}
.code-toolbar > .toolbar button,
.code-toolbar > .toolbar a,
.code-toolbar > .toolbar span {
background: #10b981 !important;
color: white !important;
border: none !important;
display: inline-block !important;
opacity: 1 !important;
visibility: visible !important;
}
```
Loading