Class CreateSVGSketchDiagramAction

Action that generates hand-drawn/sketch-style SVG diagrams using Rough.js. Provides informal, whiteboard-style visualizations for brainstorming and presentations.

This action supports the same diagram types as Create SVG Diagram but renders them with a sketchy, hand-drawn aesthetic using Rough.js.

Example

// Sketch flowchart
await runAction({
  ActionName: 'Create SVG Sketch Diagram',
  Params: [
    { Name: 'DiagramType', Value: 'flow' },
    { Name: 'Nodes', Value: JSON.stringify([
      { id: '1', kind: 'start', label: 'Start' },
      { id: '2', kind: 'process', label: 'Process' },
      { id: '3', kind: 'end', label: 'End' }
    ]) },
    { Name: 'Edges', Value: JSON.stringify([
      { from: '1', to: '2' },
      { from: '2', to: '3' }
    ]) },
    { Name: 'Roughness', Value: '1.5' },
    { Name: 'FillStyle', Value: 'cross-hatch' }
  ]
});

Hierarchy (view full)

Constructors

constructor

Methods

InternalRunAction Run addTitle ensureString getNodeColorIndex getNodeDimensions getParamValue parseJSON renderSketchER renderSketchFlow renderSketchOrg

Constructors

constructor

Methods

Protected InternalRunAction

  • InternalRunAction(params): Promise<SVGActionResult>

  • Generates a hand-drawn style SVG diagram from the provided data and configuration

    Parameters

    • params: RunActionParams<any>

      The action parameters containing:

      • DiagramType: Type of diagram ('flow' | 'org' | 'er')
      • Nodes: JSON array or object of nodes
      • Edges: JSON array of edges (for flow and ER diagrams)
      • Roughness: Hand-drawn wobble intensity (0.5-3.0, default: 1.5)
      • FillStyle: Fill pattern ('solid' | 'hachure' | 'cross-hatch' | 'dots', default: 'hachure')
      • Bowing: Curve intensity for lines (0-5, default: 1)
      • Direction: Layout direction ('TB' | 'LR' | 'RL' | 'BT') for flow diagrams
      • Width: Diagram width in pixels (optional, default: 800)
      • Height: Diagram height in pixels (optional, default: 600)
      • Title: Diagram title (optional)
      • Palette: Color palette name (optional)
      • EnableTooltips: Enable interactive tooltips (optional)
      • EnablePanZoom: Enable pan and zoom (optional)
      • WrapWithContainer: Wrap in scrollable container (optional)

    Returns Promise<SVGActionResult>

    A promise resolving to an SVGActionResult

Run

  • Run(params): Promise<ActionResultSimple>

  • Executes the action with the provided parameters.

    Parameters

    • params: RunActionParams<any>

      The action execution parameters including context

    Returns Promise<ActionResultSimple>

    Promise resolving to the action result

Private addTitle

Private ensureString

Private getNodeColorIndex

Private getNodeDimensions

Private getParamValue

Private parseJSON

Private renderSketchER

Private renderSketchFlow

Private renderSketchOrg

Settings

Member Visibility

Theme

On This Page

constructorInternalRunActionRunaddTitleensureStringgetNodeColorIndexgetNodeDimensionsgetParamValueparseJSONrenderSketchERrenderSketchFlowrenderSketchOrg