Napkin

BETA

Quick idea sketching for engineers

Capture technical ideas as effortlessly as sketching on the back of a napkin — with professional output, engineering symbols, and real-time collaboration.

✏️

Zero friction

Open a browser, start drawing. No installation needed.

⚡

Engineering-native

IEC symbols, professional drawing frames, and brand color palettes built in.

🤝

Real-time collaboration

Share drawings, see live cursors, and work together in real time.

✨ AI Context: Creating .napkin Files

NAPKIN FILE FORMAT v2.1 - COMPREHENSIVE GUIDE
NAPKIN FILE FORMAT v2.1 - COMPREHENSIVE GUIDE

When asked to create diagrams, sketches, or presentations, generate .napkin files using this format.

=== FILE STRUCTURE (v2.0 Multi-Page) ===
{
  "version": "2.0",
  "canvas": {"width": 1920, "height": 1080},
  "pages": [
    {
      "id": "page_" + timestamp + "_" + random,
      "name": "Page 1",
      "objects": [...],
      "layerGroups": ["Group1", "Group2"]
    }
  ],
  "currentPageIndex": 0
}

CANVAS SIZES (Standard Options):
- Default: 1920x1080
- A4 Portrait: 1748x2480
- A4 Landscape: 2480x1748
- A5 Portrait: 1240x1748
- A3 Portrait: 3508x4961
- Custom: any size 1-20000px

=== OBJECT TYPES ===

1. RECTANGLE (with optional rounded corners):
{
  "id": "obj_" + timestamp + "_" + random,
  "type": "rectangle",
  "x": 100, "y": 100,
  "width": 200, "height": 150,
  "fill": "#FF1243",
  "stroke": "#000000",
  "strokeWidth": 2,
  "borderRadius": 10,
  "visible": true,
  "layerGroup": "Group1"
}

2. SQUARE (with optional rounded corners):
{
  "id": "obj_123_abc",
  "type": "square",
  "x": 300, "y": 100,
  "width": 150, "height": 150,
  "fill": "#007079",
  "stroke": "#243746",
  "strokeWidth": 2,
  "borderRadius": 0,
  "visible": true
}

3. CIRCLE:
{
  "id": "obj_124_def",
  "type": "circle",
  "x": 500, "y": 200,
  "radius": 60,
  "fill": "#0084C8",
  "stroke": "#000000",
  "strokeWidth": 3,
  "visible": true
}

4. TRIANGLE:
{
  "id": "obj_125_ghi",
  "type": "triangle",
  "x": 150, "y": 300,
  "width": 100, "height": 120,
  "fill": "#FFD500",
  "stroke": "#000000",
  "strokeWidth": 2,
  "visible": true
}

5. TEXT (editable):
{
  "id": "obj_126_jkl",
  "type": "text",
  "x": 200, "y": 50,
  "text": "Diagram Title",
  "fontSize": 32,
  "fontFamily": "Arial",
  "fill": "#000000",
  "textColor": "#000000",
  "strokeWidth": 0,
  "width": 250, "height": 40,
  "visible": true
}

6. ARROW (simple curved):
{
  "id": "obj_127_mno",
  "type": "arrow",
  "x": 100, "y": 150,
  "width": 200, "height": 100,
  "controlX": 150, "controlY": 100,
  "stroke": "#000000",
  "strokeWidth": 3,
  "fill": "#000000",
  "visible": true
}

7. MULTI-ARROW (polyarrow with multiple segments):
{
  "id": "obj_128_pqr",
  "type": "polyarrow",
  "points": [
    {"x": 100, "y": 100},
    {"x": 200, "y": 150},
    {"x": 300, "y": 120},
    {"x": 400, "y": 200}
  ],
  "stroke": "#243746",
  "strokeWidth": 3,
  "fill": "#243746",
  "visible": true
}

8. SVG ELEMENTS (Pre-configured icons):
{
  "id": "obj_129_stu",
  "type": "svgElement",
  "elementType": "server|database|user|cloud|api|mcp",
  "elementName": "Web Server",
  "x": 400, "y": 300,
  "width": 120, "height": 100,
  "fill": "#007079",
  "stroke": "#243746",
  "textColor": "#ffffff",
  "strokeWidth": 2,
  "visible": true,
  "config": {
    "text": "API Server",
    "name": "auth-service"
  }
}

=== BRAND COLOR PALETTE ===
Brand Colors:
  - Energy Red: #ff1243
  - White: #ffffff
  - North Sea: #243746
  - Norwegian Woods: #007079
  - Sand & Summer: #7d0023
  - Autumn Storm: #86a7ac

North Sea Blues: #001F30, #002844, #003B5C, #004F79, #006396, #0076B3
Norwegian Woods Greens: #004834, #00573F, #006A4D, #007C5C, #009169, #00A878
Ocean Blue: #0084C8
Energy Yellow: #FFD500

=== LAYER GROUPS ===
Objects can be organized into layer groups:
"layerGroups": ["Background", "Content", "Annotations"]
Each object can have: "layerGroup": "Background"

Objects are rendered in array order (first = bottom, last = top)

=== MULTI-PAGE PRESENTATIONS ===
Create multiple pages for slide-style presentations:
{
  "version": "2.0",
  "canvas": {"width": 1920, "height": 1080},
  "pages": [
    {
      "id": "page_001",
      "name": "Introduction",
      "objects": [...slide 1 objects...],
      "layerGroups": []
    },
    {
      "id": "page_002",
      "name": "Architecture",
      "objects": [...slide 2 objects...],
      "layerGroups": ["Components", "Connections"]
    },
    {
      "id": "page_003",
      "name": "Conclusion",
      "objects": [...slide 3 objects...],
      "layerGroups": []
    }
  ],
  "currentPageIndex": 0
}

=== EXAMPLE: SYSTEM ARCHITECTURE DIAGRAM ===
{
  "version": "2.0",
  "canvas": {"width": 1920, "height": 1080},
  "pages": [{
    "id": "page_001",
    "name": "Architecture Overview",
    "objects": [
      {
        "id": "title_001",
        "type": "text",
        "x": 650, "y": 50,
        "text": "System Architecture",
        "fontSize": 48,
        "fontFamily": "Arial",
        "fill": "#243746",
        "textColor": "#243746",
        "strokeWidth": 0,
        "width": 600, "height": 60,
        "visible": true
      },
      {
        "id": "server_box",
        "type": "rectangle",
        "x": 300, "y": 200,
        "width": 250, "height": 180,
        "fill": "#007079",
        "stroke": "#243746",
        "strokeWidth": 3,
        "borderRadius": 15,
        "visible": true,
        "layerGroup": "Infrastructure"
      },
      {
        "id": "server_label",
        "type": "text",
        "x": 350, "y": 270,
        "text": "API Server",
        "fontSize": 28,
        "fontFamily": "Arial",
        "fill": "#ffffff",
        "textColor": "#ffffff",
        "strokeWidth": 0,
        "width": 150, "height": 35,
        "visible": true,
        "layerGroup": "Infrastructure"
      },
      {
        "id": "db_circle",
        "type": "circle",
        "x": 900, "y": 290,
        "radius": 90,
        "fill": "#0084C8",
        "stroke": "#243746",
        "strokeWidth": 3,
        "visible": true,
        "layerGroup": "Infrastructure"
      },
      {
        "id": "db_label",
        "type": "text",
        "x": 840, "y": 280,
        "text": "Database",
        "fontSize": 24,
        "fontFamily": "Arial",
        "fill": "#ffffff",
        "textColor": "#ffffff",
        "strokeWidth": 0,
        "width": 120, "height": 30,
        "visible": true,
        "layerGroup": "Infrastructure"
      },
      {
        "id": "connection_arrow",
        "type": "arrow",
        "x": 550, "y": 290,
        "width": 260, "height": 0,
        "controlX": 680, "controlY": 270,
        "stroke": "#ff1243",
        "strokeWidth": 4,
        "fill": "#ff1243",
        "visible": true,
        "layerGroup": "Connections"
      }
    ],
    "layerGroups": ["Infrastructure", "Connections"]
  }],
  "currentPageIndex": 0
}

=== TIPS FOR AI GENERATION ===
1. Always use unique IDs: "obj_" + timestamp + "_" + random
2. Coordinate system: (0,0) is top-left of canvas
3. For text, set both "fill" and "textColor" to same value
4. Use borderRadius: 0-100 for rounded rectangle corners
5. Layer groups help organize complex diagrams
6. Objects render in array order: first = back, last = front
7. Multi-page for presentations: each page independent
8. Standard canvas sizes match paper formats (A4, A5, etc.)
9. Save as .napkin file extension
10. Use brand colors for professional appearance

RECOMMENDED APPROACH:
- Start with title text at top
- Add background shapes with rounded corners
- Add labels and content text
- Connect with arrows
- Group related elements in layerGroups
- Use multiple pages for step-by-step or slide presentations

=== DRAWING FRAMES (TECHNICAL DRAWINGS) ===

Professional drawing frames can be added to pages for technical documentation.
Each page can have its own drawing frame settings.

⚠️ CRITICAL: Canvas size MUST match the drawing frame paper size!
When using drawing frames, the canvas dimensions must equal the paper size dimensions.
Otherwise "Fit All" and object positioning will not work correctly.

DRAWING FRAME STRUCTURE:
{
  "drawingFrame": {
    "enabled": true,
    "size": "A3",              // Options: "A0", "A1", "A2", "A3"
    "orientation": "landscape", // Options: "landscape", "portrait"
    "margin": 20,              // Margin in mm (5-50)
    "titleBlock": {
      "name": "System Architecture Diagram",
      "number": "DWG-001",
      "revision": "A",
      "date": "2025-01-15",
      "author": "Engineer Name",
      "project": "Project Name"
    }
  }
}

PAPER SIZES (in mm) and CANVAS DIMENSIONS (pixels at 96 DPI):
- A0: 841 × 1189 mm → Landscape: 4493 × 3178 px | Portrait: 3178 × 4493 px
- A1: 594 × 841 mm  → Landscape: 3178 × 2245 px | Portrait: 2245 × 3178 px
- A2: 420 × 594 mm  → Landscape: 2245 × 1585 px | Portrait: 1585 × 2245 px
- A3: 297 × 420 mm  → Landscape: 1585 × 1122 px | Portrait: 1122 × 1585 px

Orientation automatically swaps width/height:
- Landscape: width > height (most common for technical diagrams)
- Portrait: height > width

CONVERSION FORMULA: mm × 3.7795 = pixels (at 96 DPI)

TITLE BLOCK:
- Located in bottom-right corner (300×120px)
- Contains 5 rows for information
- Revision displayed in dedicated box (top-right of title block)
- Fields: Drawing Name, Drawing No, Project, Author, Date, Revision

EXAMPLE WITH DRAWING FRAME:
{
  "version": "2.0",
  "canvas": {"width": 1585, "height": 1122},  // ⚠️ MUST match A3 landscape dimensions!
  "pages": [{
    "id": "page_001",
    "name": "Technical Drawing",
    "objects": [
      // ... your diagram objects ...
    ],
    "layerGroups": [],
    "drawingFrame": {
      "enabled": true,
      "size": "A3",              // Canvas is 1585×1122 = A3 landscape
      "orientation": "landscape",
      "margin": 20,
      "titleBlock": {
        "name": "Process Flow Diagram",
        "number": "PFD-101",
        "revision": "B",
        "date": "2025-01-15",
        "author": "John Smith",
        "project": "Refinery Upgrade"
      }
    }
  }],
  "currentPageIndex": 0
}

CANVAS SIZE MATCHING TABLE:
Drawing Frame Size → Required Canvas Dimensions
- A3 Landscape: canvas = {"width": 1585, "height": 1122}
- A3 Portrait:  canvas = {"width": 1122, "height": 1585}
- A2 Landscape: canvas = {"width": 2245, "height": 1585}
- A2 Portrait:  canvas = {"width": 1585, "height": 2245}
- A1 Landscape: canvas = {"width": 3178, "height": 2245}
- A1 Portrait:  canvas = {"width": 2245, "height": 3178}
- A0 Landscape: canvas = {"width": 4493, "height": 3178}
- A0 Portrait:  canvas = {"width": 3178, "height": 4493}

WHEN TO USE DRAWING FRAMES:
- Technical diagrams (P&IDs, PFDs, SCDs)
- Engineering documentation
- Formal presentations requiring title blocks
- Multi-page technical documentation sets
- When specific paper size is required for printing

NOTE: Drawing frames are rendered on the canvas and included in SVG/PNG exports
}

SCD LIBRARY - SYSTEM CONTROL DIAGRAM AI CONTEXT

This context is for creating System Control Diagrams (SCD) using the PAS IEC 63131 and IEC 61131-3 compliant symbol library.

=== ABOUT SCD LIBRARY ===

The SCD library contains industrial control system symbols following IEC 61131-3 standards for function blocks. These are used in:
- Process Control Systems
- Industrial Automation
- Safety Instrumented Systems (SIS)
- Distributed Control Systems (DCS)
- Programmable Logic Controllers (PLC)

=== AVAILABLE SYMBOL CATEGORIES ===

1. CONTROL BLOCKS:
   - SBV (Block Valve Control)
   - MA (Analog Monitor)
   - CA (PID Control)
   - Custom Function Blocks

2. LOGIC FUNCTIONS:
   - AND Gate
   - OR Gate
   - XOR Gate
   - SR Memory

3. TIMERS:
   - TON (On Delay)
   - TOF (Off Delay)
   - PULSE (Pulse Generator)

4. MATH FUNCTIONS:
   - ADD (Addition)
   - MUL (Multiplication)

5. SAFETY FUNCTIONS:
   - Interlock (ILK)

6. CONNECTION ELEMENTS:
   - Signal Reference
   - General Signal
   - Node Splitter

=== HOW TO USE SCD SYMBOLS IN .NAPKIN FILES ===

SCD symbols are added as svgElement objects with the elementId matching the library symbol.

⚠️ IEC 61131 FUNCTION BLOCK STRUCTURE:
All control blocks (SBV, MA, CA) use the IEC 61131-3 standard function block shape with:
- System identifier (top left box): PCS, DCS, SIS, etc.
- Node identifier (middle left box): Node name or location
- Function type (bottom left box): SBV, MA, CA (fixed per block type)
- Main tag area (right side): Instrument tag (TT-101, XV-201, etc.)
- Description footer (bottom): Human-readable description

Example - Adding an MA (Analog Monitor) block:
{
  "id": "obj_" + timestamp + "_" + random,
  "type": "svgElement",
  "elementId": "ma-block",
  "elementName": "MA - Analog Monitor",
  "x": 300,
  "y": 200,
  "width": 140,
  "height": 110,
  "fill": "#fff8e8",
  "stroke": "#FFA500",
  "textColor": "#243746",
  "strokeWidth": 2,
  "visible": true,
  "config": {
    "system": "PCS",
    "node": "NODE-1",
    "tag": "TT-101",
    "label": "Temperature"
  }
}

Example - Adding a CA (PID Control) block:
{
  "id": "obj_456_xyz",
  "type": "svgElement",
  "elementId": "ca-block",
  "elementName": "CA - PID Control",
  "x": 500,
  "y": 200,
  "width": 140,
  "height": 110,
  "fill": "#e8f8e8",
  "stroke": "#228B22",
  "textColor": "#243746",
  "strokeWidth": 2,
  "visible": true,
  "config": {
    "system": "PCS",
    "node": "NODE-1",
    "tag": "TIC-201",
    "label": "PID Control"
  }
}

Example - Adding an SBV (Block Valve) control:
{
  "id": "obj_789_abc",
  "type": "svgElement",
  "elementId": "sbv-block",
  "elementName": "SBV - Block Valve",
  "x": 700,
  "y": 200,
  "width": 140,
  "height": 110,
  "fill": "#e8f4f8",
  "stroke": "#007079",
  "textColor": "#243746",
  "strokeWidth": 2,
  "visible": true,
  "config": {
    "system": "PCS",
    "node": "NODE-1",
    "tag": "XV-301",
    "label": "Block Valve"
  }
}

Example - Adding logic gates (AND, OR, XOR):
{
  "id": "obj_101_def",
  "type": "svgElement",
  "elementId": "logic-and",
  "elementName": "AND - Logic Gate",
  "x": 400,
  "y": 350,
  "width": 100,
  "height": 85,
  "fill": "#f0f0f0",
  "stroke": "#243746",
  "strokeWidth": 2,
  "visible": true,
  "config": {
    "label": "AND-01"
  }
}

Example - Adding timers (TON, TOF, PULSE):
{
  "id": "obj_202_ghi",
  "type": "svgElement",
  "elementId": "timer-ton",
  "elementName": "TON - On Delay Timer",
  "x": 600,
  "y": 350,
  "width": 120,
  "height": 100,
  "fill": "#e8f4f8",
  "stroke": "#007079",
  "strokeWidth": 2,
  "visible": true,
  "config": {
    "label": "TIM-01",
    "time": "5s"
  }
}

=== SCD ELEMENT IDs ===

Use these elementId values for SCD symbols:

CONTROL BLOCKS:
- "sbv-block" - Block Valve Control
- "ma-block" - Analog Monitor
- "ca-block" - PID Control
- "blackbox" - Custom Function Block

LOGIC FUNCTIONS:
- "logic-and" - AND Gate
- "logic-or" - OR Gate
- "logic-xor" - XOR Gate
- "sr-memory" - SR Memory

TIMERS:
- "timer-ton" - On Delay Timer
- "timer-tof" - Off Delay Timer
- "pulse-gen" - Pulse Generator

MATH FUNCTIONS:
- "math-add" - Addition
- "math-mul" - Multiplication

SAFETY:
- "interlock" - Interlock Function

CONNECTIONS:
- "signal-reference" - Signal Reference
- "general-signal" - General Signal
- "node-splitter" - Node Splitter

=== SCD COLOR SCHEME ===

Standard colors for different SCD element types:

Control Blocks (Monitoring):
- Fill: #fff8e8 (light yellow)
- Stroke: #FFA500 (orange)

Control Blocks (Valve Control):
- Fill: #e8f4f8 (light blue)
- Stroke: #007079 (Equinor moss green)

Control Blocks (PID):
- Fill: #e8f8e8 (light green)
- Stroke: #228B22 (forest green)

Safety/Interlock:
- Fill: #ffe8e8 (light red)
- Stroke: #FF1243 (Equinor energy red)

Logic Functions:
- Fill: #f0f0f0 (light gray)
- Stroke: #243746 (North Sea blue)

Math Functions:
- Fill: #f0f8ff (alice blue)
- Stroke: #4169E1 (royal blue)

=== CREATING A COMPLETE SCD DIAGRAM ===

Example - Simple SCD with temperature monitoring and valve control:
{
  "version": "2.0",
  "canvas": {"width": 1920, "height": 1080},
  "pages": [{
    "id": "page_001",
    "name": "Process Control Loop",
    "objects": [
      {
        "id": "title_001",
        "type": "text",
        "x": 700, "y": 50,
        "text": "Temperature Control Loop",
        "fontSize": 32,
        "fontFamily": "Arial",
        "fill": "#243746",
        "textColor": "#243746",
        "strokeWidth": 0,
        "width": 500, "height": 40,
        "visible": true
      },
      {
        "id": "ma_temp_001",
        "type": "svgElement",
        "elementId": "ma-block",
        "elementName": "MA - Analog Monitor",
        "x": 300, "y": 200,
        "width": 140, "height": 120,
        "fill": "#fff8e8",
        "stroke": "#FFA500",
        "strokeWidth": 2,
        "visible": true,
        "config": {
          "tag": "TT-101",
          "label": "Temperature",
          "pin1": "AHH",
          "pin2": "ALL"
        }
      },
      {
        "id": "ca_control_001",
        "type": "svgElement",
        "elementId": "ca-block",
        "elementName": "CA - PID Control",
        "x": 600, "y": 200,
        "width": 140, "height": 120,
        "fill": "#e8f8e8",
        "stroke": "#228B22",
        "strokeWidth": 2,
        "visible": true,
        "config": {
          "tag": "TIC-101",
          "label": "PID Control"
        }
      },
      {
        "id": "sbv_valve_001",
        "type": "svgElement",
        "elementId": "sbv-block",
        "elementName": "SBV - Block Valve",
        "x": 900, "y": 200,
        "width": 140, "height": 120,
        "fill": "#e8f4f8",
        "stroke": "#007079",
        "strokeWidth": 2,
        "visible": true,
        "config": {
          "tag": "XV-101",
          "label": "Control Valve",
          "pin1": "WH",
          "pin2": "LSL"
        }
      },
      {
        "id": "arrow_ma_to_ca",
        "type": "arrow",
        "x": 440, "y": 260,
        "width": 160, "height": 0,
        "controlX": 520, "controlY": 260,
        "stroke": "#243746",
        "strokeWidth": 2,
        "fill": "#243746",
        "visible": true
      },
      {
        "id": "arrow_ca_to_sbv",
        "type": "arrow",
        "x": 740, "y": 260,
        "width": 160, "height": 0,
        "controlX": 820, "controlY": 260,
        "stroke": "#243746",
        "strokeWidth": 2,
        "fill": "#243746",
        "visible": true
      }
    ],
    "layerGroups": ["Instrumentation", "Control", "Connections"]
  }],
  "currentPageIndex": 0
}

=== TAG NAMING CONVENTIONS ===

Follow ISA-5.1 instrument tag conventions:

First Letter (Measured Variable):
- T = Temperature
- P = Pressure
- F = Flow
- L = Level
- A = Analyzer

Second Letter (Function):
- I = Indicator
- C = Controller
- T = Transmitter
- V = Valve
- S = Switch

Tag Examples:
- TT-101 = Temperature Transmitter #101
- TIC-201 = Temperature Indicating Controller #201
- PT-301 = Pressure Transmitter #301
- FIC-401 = Flow Indicating Controller #401
- LT-501 = Level Transmitter #501
- XV-601 = Control Valve #601

=== TIPS FOR SCD DIAGRAMS ===

1. Use consistent spacing (150-200px between blocks)
2. Organize in control loops (measurement → control → actuation)
3. Use layerGroups to separate: Instrumentation, Control Logic, Safety Systems
4. Add text labels for signal descriptions
5. Use arrows to show signal flow direction
6. Apply standard SCD colors for easy identification
7. Include tag numbers following ISA-5.1 conventions
8. Group related functions vertically or horizontally
9. Use multi-page for complex systems (one loop per page)
10. Export as SVG for high-quality engineering documentation

=== EQUINOR BRAND COLORS ===

When styling SCD diagrams with Equinor branding:
- Energy Red: #FF1243 (for safety/alarms)
- North Sea: #243746 (for standard connections)
- Norwegian Woods: #007079 (for control elements)
- Ocean Blue: #0084C8 (for monitoring)

RECOMMENDED APPROACH FOR SCD DIAGRAMS:
1. Start with title text describing the control loop/system
2. Add measurement blocks (MA, transmitters) on the left
3. Add control blocks (CA, PID) in the middle
4. Add actuation blocks (SBV, valves) on the right
5. Connect with arrows showing signal flow
6. Add logic gates and timers as needed
7. Include interlock blocks for safety-critical paths
8. Group elements in layerGroups by function
9. Use multiple pages for different control loops
10. Export as SVG for P&ID documentation

=== DRAWING FRAMES FOR SCD DIAGRAMS ===

SCD diagrams should typically use professional drawing frames with title blocks for proper documentation.

⚠️ CRITICAL: Canvas size MUST match the drawing frame paper size!
The canvas dimensions must exactly match the paper size for proper rendering and "Fit All" functionality.

RECOMMENDED SETTINGS FOR SCDs:
- Size: A3 or A2 (most common for control loop diagrams)
- Orientation: Landscape (standard for horizontal signal flow)
- Margin: 20mm (standard engineering drawing margin)

CANVAS DIMENSIONS FOR SCD PAPER SIZES (at 96 DPI):
- A3 Landscape: canvas = {"width": 1585, "height": 1122}
- A2 Landscape: canvas = {"width": 2245, "height": 1585}
- A1 Landscape: canvas = {"width": 3178, "height": 2245}
- A0 Landscape: canvas = {"width": 4493, "height": 3178}

COMPLETE SCD EXAMPLE WITH DRAWING FRAME:
{
  "version": "2.0",
  "canvas": {"width": 1585, "height": 1122},  // ⚠️ A3 landscape dimensions - MUST match!
  "pages": [{
    "id": "page_001",
    "name": "Temperature Control Loop",
    "objects": [
      {
        "id": "ma_001",
        "type": "svgElement",
        "elementId": "ma-block",
        "elementName": "MA - Analog Monitor",
        "x": 200, "y": 300,
        "width": 140, "height": 110,
        "fill": "#fff8e8",
        "stroke": "#FFA500",
        "strokeWidth": 2,
        "visible": true,
        "config": {
          "system": "PCS",
          "node": "NODE-1",
          "tag": "TT-101",
          "label": "Temperature"
        }
      },
      {
        "id": "ca_001",
        "type": "svgElement",
        "elementId": "ca-block",
        "elementName": "CA - PID Control",
        "x": 500, "y": 300,
        "width": 140, "height": 110,
        "fill": "#e8f8e8",
        "stroke": "#228B22",
        "strokeWidth": 2,
        "visible": true,
        "config": {
          "system": "PCS",
          "node": "NODE-1",
          "tag": "TIC-101",
          "label": "PID Control"
        }
      },
      {
        "id": "sbv_001",
        "type": "svgElement",
        "elementId": "sbv-block",
        "elementName": "SBV - Block Valve",
        "x": 800, "y": 300,
        "width": 140, "height": 110,
        "fill": "#e8f4f8",
        "stroke": "#007079",
        "strokeWidth": 2,
        "visible": true,
        "config": {
          "system": "PCS",
          "node": "NODE-1",
          "tag": "XV-101",
          "label": "Control Valve"
        }
      },
      {
        "id": "arrow_001",
        "type": "arrow",
        "x": 340, "y": 360,
        "width": 160, "height": 0,
        "controlX": 420, "controlY": 360,
        "stroke": "#243746",
        "strokeWidth": 2,
        "fill": "#243746",
        "visible": true
      },
      {
        "id": "arrow_002",
        "type": "arrow",
        "x": 640, "y": 360,
        "width": 160, "height": 0,
        "controlX": 720, "controlY": 360,
        "stroke": "#243746",
        "strokeWidth": 2,
        "fill": "#243746",
        "visible": true
      }
    ],
    "layerGroups": ["Instrumentation", "Control", "Actuation"],
    "drawingFrame": {
      "enabled": true,
      "size": "A3",
      "orientation": "landscape",
      "margin": 20,
      "titleBlock": {
        "name": "Temperature Control Loop - Reactor R-101",
        "number": "SCD-TIC-101",
        "revision": "A",
        "date": "2025-01-15",
        "author": "Control Engineer",
        "project": "Reactor Temperature Control System"
      }
    }
  }],
  "currentPageIndex": 0
}

TITLE BLOCK NAMING CONVENTIONS FOR SCDs:
- Drawing Name: Descriptive name of control loop or system
  Example: "Temperature Control Loop - Reactor R-101"

- Drawing Number: Use SCD prefix with tag number
  Examples: "SCD-TIC-101", "SCD-PIC-201", "SCD-FIC-301"

- Revision: Standard revision letters (A, B, C, etc.)
  A = Initial issue, B = First revision, etc.

- Project: Overall project or system name
  Example: "Refinery Upgrade Phase 2"

WHY USE DRAWING FRAMES FOR SCDs:
✓ Professional engineering documentation standard
✓ Required for P&ID and SCD submittal packages
✓ Proper version control with revision tracking
✓ Clear identification of drawing content
✓ Meets industrial standards (ISO, IEC, ANSI)
✓ Essential for regulatory compliance
✓ Facilitates document management systems

PAPER SIZE SELECTION FOR SCDs:
- A3 Landscape: Single control loop or simple system
- A2 Landscape: Multiple interconnected control loops
- A1 Landscape: Complex system with many function blocks
- A0 Landscape: Very large process control systems

Always use LANDSCAPE orientation for SCDs to match horizontal signal flow convention.

=== SYSTEM AND NODE IDENTIFIERS ===

IEC 61131 function blocks include system and node identifiers for proper hierarchical addressing:

SYSTEM IDENTIFIER (Top Left Box):
- PCS: Process Control System
- DCS: Distributed Control System
- SIS: Safety Instrumented System
- ESD: Emergency Shutdown System
- F&G: Fire & Gas System
- BMS: Burner Management System

NODE IDENTIFIER (Middle Left Box):
- Physical location or logical grouping
- Examples: "NODE-1", "RACK-A", "PANEL-1", "SUBSEA", "TOPSIDE"
- Can represent control system node, communication node, or physical location

FUNCTION TYPE (Bottom Left Box):
- Fixed per block type: SBV, MA, CA
- Defined by IEC 61131-3 standard
- Cannot be changed by user (structural part of block)

TAG (Main Area):
- Follows ISA-5.1 instrument tag conventions
- Examples: TT-101, PIC-201, XV-301
- Unique identifier for the function block instance

EXAMPLE CONFIGURATIONS BY SYSTEM TYPE:

Process Control System (PCS):
{
  "config": {
    "system": "PCS",
    "node": "NODE-1",
    "tag": "TT-101",
    "label": "Reactor Temperature"
  }
}

Safety System (SIS):
{
  "config": {
    "system": "SIS",
    "node": "SAFE-A",
    "tag": "PT-501",
    "label": "Safety Pressure"
  }
}

Subsea Control System:
{
  "config": {
    "system": "PCS",
    "node": "SUBSEA",
    "tag": "XV-201",
    "label": "Production Wing Valve"
  }
}

Napkin BETA

Quick Idea Sketching Tool

About Napkin

Born from the timeless tradition of sketching ideas on a napkin, this digital tool brings that same spontaneity and simplicity to your workflow. Whether you're brainstorming architecture diagrams, wireframing interfaces, or creating presentation slides, Napkin lets you capture your thoughts quickly and beautifully.

Perfect for: Technical diagrams, system architecture, wireframes, flowcharts, and quick visual presentations.

Version: BETA v2.0 | File Format: .napkin (JSON)

🎨 Tools

Select: Click and drag objects to move them
Shapes: Click tool, then drag on canvas to create (Rectangle, Square, Circle, Triangle)
Text: Click on canvas, enter text in popup with customizable font and size
Arrow: Click start point, then end point to create curved arrow
Multi-Arrow: Click multiple points to create multi-segment arrow, double-click to finish
Elements: Pre-configured icons from library (MCP, Server, Database, User, Cloud, API)
Image: Upload PNG, JPG, or SVG files to the canvas

⌨️ Keyboard Shortcuts

`Delete` / `Del`	Delete selected object(s)
`Esc`	Deselect all objects
`Ctrl` + `+`	Zoom in (10% increments)
`Ctrl` + `-`	Zoom out (10% increments)
`Ctrl` + `0`	Reset zoom and pan to default
`Ctrl` + `Scroll`	Zoom in/out at mouse position
`Shift` + `Drag`	Pan canvas while zoomed
`Middle Mouse` + `Drag`	Pan canvas while zoomed

🖱️ Mouse Controls

Click object: Select single object
Drag object: Move selected object(s)
Drag on empty area: Multi-select with box selection
Click canvas background: Deselect all (or press Esc)
Double-click text: Edit text content
Right-click layer: Context menu to assign to group
Double-click page name: Rename page/slide
Scroll wheel: Vertical scrolling (use Ctrl+Scroll for zoom)

📁 Layers & Groups

Drag layers up/down: Reorder objects - top of panel = in front on canvas
Eye icon (👁️): Toggle object visibility on/off
+ New Layer Group: Create named groups to organize objects
Drag object to group header: Assign object to that group
Group eye icon: Show/hide entire group at once
Expand/collapse groups: Click group name to toggle visibility of group contents
Layer names: Click layer to see object type and properties in panel

🎨 Colors & Palettes

🎨 Palette Button: Click next to any color picker to access brand color palettes
6 Brand Palettes Available:
- Brand: Energy Red, White, North Sea, Norwegian Woods, Sand & Summer, Autumn Storm
- North Sea: 6 blue shades from dark navy to light blue
- Norwegian Woods: 6 green shades from dark to light
- Sand & Summer: 6 warm earth tones from burgundy to cream
- Midnight Sun: 2 yellow shades (bright and pale)
- Autumn Storm: 3 gray-blue shades
Color Properties: Fill color, stroke color, text color (all customizable)
Custom Colors: Click color input to use browser color picker

📄 Pages (Presentations)

+ Page button: Add new slide/page to your presentation
Click tab: Switch between pages instantly
Double-click page name: Rename page (e.g., "Intro", "Architecture", "Conclusion")
× button on tab: Delete page (requires confirmation)
Independent content: Each page has its own objects and layer groups
Use cases: Create multi-slide presentations, organize complex diagrams, version variations

💾 File Operations

Save (.napkin): Download all pages as .napkin file (v2.0 format with multi-page support)
Load (.napkin): Load .napkin file - automatically migrates v1.0 files to v2.0
Export SVG: Export current page as vector SVG file
Export PNG: Export current page as raster PNG image
📋 Copy to Clipboard: Copy current page as image for pasting into other apps
Auto-save: Automatically saves to browser localStorage every 5 seconds
File format: .napkin files are JSON - human-readable and editable

1 / 1

Layers

Properties

Select an object to view properties

X Position

Y Position

Width

Height

Fill Color

Stroke Color

Stroke Width

Line Style

Border Radius: 0px

Text Color

Ready to sketch! Objects: 0

Napkin

Zero friction

Engineering-native

Real-time collaboration

Layers

Connector Lines

Properties

Element Configuration

AI Chat

Napkin

Zero friction

Engineering-native

Real-time collaboration

Enter Text

✨ AI Context: Creating .napkin Files

✨ AI Enhance with Nano Banana

📐 Drawing Frame Settings

Title Block

Napkin BETA

About Napkin

🎨 Tools

⌨️ Keyboard Shortcuts

🖱️ Mouse Controls

📁 Layers & Groups

🎨 Colors & Palettes

📄 Pages (Presentations)

💾 File Operations

📚 Element Library

Configure Element

Napkin

Layers

Connector Lines

Properties

Element Configuration

AI Chat