Dieline Application User Guide

• Packaging engineers, designers, and those needing structural confirmation before production and prototyping
• Those requiring quick diagrams (SVG/PNG) or drafts for communication

1. Open the Page→ Dieline

• Access path: /{lang}/dieline (e.g., Chinese as /cn/dieline, English as /en/dieline)

1. Select a Pouch Type and Place on Canvas

• In the left/right "Component Area", find "Basic Components", click components like "Three Seal, Stand Up, K Seal", etc., to place on the canvas.

1. Adjust Properties

• Select a component on the canvas, modify dimensions (Width/Height), seals (Side Seal/Bottom Seal), radius, stroke dash, color, whether to show labels, etc., in the "Property Panel".

1. Add Functional Components

• Continue adding "Tear, Hole/Plane Hole, Zipper, Table, Text" from the component area; drag to appropriate positions, or use properties for precise positioning.

1. Export the Diagram

• Use the toolbar "Export", select SVG or PNG to save; recommend using "Center", "Reset Zoom", "Show Grid/Labels" to optimize layout before export.

• Toolbar
  • New Project, Open Project, Save Project
  • View Controls: Zoom In, Zoom Out, Reset Zoom (100%), Center View
  • Grid Toggle: Show/Hide reference grid on canvas
  • Export: Output as SVG/PNG image
• Canvas
  • Main drawing area, supports dragging, selecting, moving components
  • Supports zooming, centering
  • Can display grid and labels
• Component List
  • Basic Pouch Types: Three Seal, Stand Up, K Seal
  • Functional Components: Tear (2×2 / 2×1), Hole, Plane Hole, Zipper, Table, Text, etc.
  • Click to add to canvas
• Property Panel
  • Displays editable properties of the currently selected component
  • Common: Position (X/Y), Size (Width/Height), Color, Stroke Dash
  • Component-Specific: Such as Gusset Height, Zipper Width, Radius, Stroke Width, etc.
• Log Viewer (if displayed)
  • Shows key operations, error messages, or internal info (optional)

• Adding Components
  • Click any component in the Component List to automatically add to canvas
  • Can add multiple of the same type (e.g., multiple tears or holes)
• Selecting and Moving
  • Click to select a component; drag to move position
  • For complex positioning, use X/Y in Property Panel for precision
• Deleting
  • Select component, click "Delete" in Property Panel (or in toolbar/right-click menu if available)
• Layering and Overlap
  • If overlapping occurs, adjust positions and sizes, or add in steps
  • For fixed main outlines, complete main outline dimensions first, then add functional components gradually

• Position and Size
  • X / Y: Top-left coordinates of component
  • Width / Height: Component width/height
  • Radius: Corner radius (for certain pouch types or holes)
• Lines and Colors
  • Stroke Width: Line width
  • Stroke Dash: Line style (Solid/Dashed/Dotted)
  • Color: Line color
  • Fill Color / Seal Fill Color: Fill color (if applicable)
• Labels
  • Show Labels: Show/Hide labels and dimension marks
  • Label Font Size: Label font size
• Pouch-Specific
  • Three Seal: Side Seal, Bottom Seal
  • Stand Up: Gusset Height
  • K Seal: K Seal related geometric parameters (as per dictionary)
• Functional Component-Specific
  • Tear (2×2/2×1): Location (Left/Right/Top/Bottom), OffsetX/OffsetY
  • Hole: Diameter, Location
  • Plane Hole: Plane Width/Height, Location
  • Zipper: Zipper Width, Location
  • Table: Rows/columns and appearance (based on current implementation)
  • Text: Content, Font Family, Font Size, Font Weight, Font Color, Rotation, etc.
• Other Helpers
  • Distance: Distance parameters for certain labels or constructions
  • Type / Position: For categorizing or orientation (e.g., Top/Bottom/Left/Right)
  • Code/Name/CompanyName/Specification/Drawing/Approval/Date: Fields available for table or title components

• Zooming
  • Zoom In / Zoom Out: Zoom in/out
  • Reset Zoom (100%): Reset to default scale
  • Scale Limit: Typically 10%–400%
• Centering View
  • Center View: Center canvas content in visible area
• Grid and Labels
  • Toggle Grid: Show/Hide grid for alignment
  • Show Labels + Label Font Size: Show dimension labels and control size

• New Project
  • If current project is unsaved, prompts for confirmation
  • Requires entering "Project Name" for saving
• Open Project
  • Select from list of saved projects
  • Also prompts if current is unsaved
• Save Project
  • Enter/confirm project name, save current canvas and component parameters
  • Recommend saving different versions at key points

• Formats: SVG or PNG
• Recommendations:
  • Use "Center View" and "Reset Zoom" before export for complete composition
  • PNG better for previews and communication, SVG better for further editing or engineering handoff
  • For high-res bitmaps, export PNG at larger canvas sizes

1. Three Seal + Zipper + Tear

• Add "Three Seal" main outline, set Width/Height, Side Seal and Bottom Seal parameters
• Add "Zipper" component, adjust Zipper Width and position (usually near top)
• Add "Tear (2×1 or 2×2)" component, select side location and fine-tune Offset
• For labels: Enable "Show Labels", set Label Font Size
• Preview, then export as SVG/PNG

1. Stand Up + Plane Hole

• Add "Stand Up", set Width/Height and Gusset Height
• Add "Plane Hole", set Plane Width/Height and position (centered near top)
• Add "Text" or "Table" as title/explanation if needed
• Export diagram and share with team

• Units and Scale
  • Tool uses pixels internally; for printing, unify to mm/inches in vector software
  • Calibrate print scale in print settings, or import to CAD/AI for further labeling
• Component Alignment
  • Use "Grid" combined with precise X/Y values
  • For symmetrical layouts, manually calculate centerline (Width/2) as reference
• Text Fonts
  • Fonts affected by browser/system; after exporting SVG, replace with standard fonts in vector software
• Browser Compatibility and Performance
  • Recommend latest Chrome/Edge
  • For many components or large canvases, save/export in segments
• Data Security
  • Local project storage may be lost with browser data clearing; export SVG for important projects and include in version control

• Multi-language Support: Chinese/English
• Access /{lang}/dieline to auto-select dictionary language based on path