{"id":46677583,"url":"https://github.com/cleissonbarbosa/asl-viewer","last_synced_at":"2026-03-08T23:14:38.540Z","repository":{"id":295499333,"uuid":"989890920","full_name":"cleissonbarbosa/asl-viewer","owner":"cleissonbarbosa","description":"A React library for visualizing AWS Step Functions workflows - ASL (Amazon States Language)","archived":false,"fork":false,"pushed_at":"2026-02-07T21:54:37.000Z","size":3355,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-02-15T13:49:15.779Z","etag":null,"topics":["amazon-state-language","asl","asl-viewer-react","aws","react-asl-viewer","state-machine","step-functions","visualization","workflow","workflow-viewer"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/asl-viewer","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cleissonbarbosa.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-05-25T03:49:38.000Z","updated_at":"2026-01-23T11:51:02.000Z","dependencies_parsed_at":null,"dependency_job_id":"fc6be0d8-d9d5-49fa-9dfd-f9634f327f24","html_url":"https://github.com/cleissonbarbosa/asl-viewer","commit_stats":null,"previous_names":["cleissonbarbosa/asl-viewer"],"tags_count":18,"template":false,"template_full_name":null,"purl":"pkg:github/cleissonbarbosa/asl-viewer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cleissonbarbosa%2Fasl-viewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cleissonbarbosa%2Fasl-viewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cleissonbarbosa%2Fasl-viewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cleissonbarbosa%2Fasl-viewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cleissonbarbosa","download_url":"https://codeload.github.com/cleissonbarbosa/asl-viewer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cleissonbarbosa%2Fasl-viewer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30276607,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-08T20:45:49.896Z","status":"ssl_error","status_checked_at":"2026-03-08T20:45:49.525Z","response_time":56,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["amazon-state-language","asl","asl-viewer-react","aws","react-asl-viewer","state-machine","step-functions","visualization","workflow","workflow-viewer"],"created_at":"2026-03-08T23:14:37.732Z","updated_at":"2026-03-08T23:14:38.527Z","avatar_url":"https://github.com/cleissonbarbosa.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ASL Viewer\n\n[![CI](https://github.com/cleissonbarbosa/asl-viewer/workflows/CI/badge.svg)](https://github.com/cleissonbarbosa/asl-viewer/actions/workflows/ci.yml)\n[![Storybook](https://img.shields.io/badge/Storybook-FF4785?style=flat\u0026logo=storybook\u0026logoColor=white)](https://cleissonbarbosa.github.io/asl-viewer/)\n[![asl-viewer npm version](https://badge.fury.io/js/asl-viewer.svg)](https://badge.fury.io/js/asl-viewer)\n[![npm bundle size](https://img.shields.io/bundlephobia/min/asl-viewer.svg)](https://bundlephobia.com/result?p=asl-viewer)\n[![License](https://img.shields.io/npm/l/asl-viewer)](https://img.shields.io/badge/license-Apache%202.0-blue?style=flat-square)\n\nA React library for visualizing AWS Step Functions workflows (Amazon States Language) in the browser. Built with TypeScript and based on the AWS Toolkit for VS Code.\n\n## 📖 Live Examples\n\nCheck out our [Storybook](https://cleissonbarbosa.github.io/asl-viewer/) to see interactive examples and explore all available components and features.\n\n\u003cdetails\u003e\n\u003csummary\u003eGIF Examples\u003c/summary\u003e\n\n\u003c!-- ![ASL Viewer Demo](./assets/screenshot-complex-workflow.gif) --\u003e\n\n![ASL Viewer Demo 2](./assets/screenshot-with-toolbar.gif)\n\n\u003c/details\u003e\n\n## Features\n\n- 🎨 **Visual Workflow Rendering** - Display ASL workflows as interactive graphs\n- 🌓 **Theme Support** - Light and dark themes built-in\n- 📐 **Layout Options** - Support for Top-to-Bottom and Left-to-Right layouts\n- ✅ **ASL Validation** - Comprehensive validation for ASL syntax and semantics\n- 🔄 **Auto Layout** - Automatic graph layout with reactive updates\n- 📱 **Responsive** - Works on different screen sizes\n- 🖱️ **Interactive** - Click handlers for states and connections\n- 🔍 **Detailed Inspection** - Rich state details panel with JSON viewing\n- 🌐 **Multiple Input Sources** - Load from definition objects, URLs, or files\n- 📄 **YAML Support** - Support for both JSON and YAML formats\n- 🔧 **Extensible** - Easy to customize and extend\n- 📚 **TypeScript** - Full TypeScript support with comprehensive types\n\n## Installation\n\n```bash\nnpm install asl-viewer\n```\n\nor with Yarn:\n\n```bash\nyarn add asl-viewer\n```\n\n## CSS Import\n\n**Important:** You must import the CSS file for the component to display correctly.\n\n### ES Modules / Webpack\n\n```js\nimport \"asl-viewer/dist/index.css\";\n```\n\n### CommonJS\n\n```js\nrequire(\"asl-viewer/dist/index.css\");\n```\n\n### HTML (if using a CDN)\n\n```html\n\u003clink\n  rel=\"stylesheet\"\n  href=\"https://cdn.jsdelivr.net/npm/asl-viewer@latest/dist/index.css\"\n/\u003e\n```\n\n### CSS-in-JS / Styled Components\n\nIf you're using CSS-in-JS libraries or have build tools that don't handle CSS imports automatically, make sure to include the CSS file in your build process or import it in your main application file.\n\n## Quick Start\n\n### Basic Usage with Definition Object\n\n```tsx\nimport React from \"react\";\nimport { WorkflowViewer } from \"asl-viewer\";\nimport \"asl-viewer/dist/index.css\"; // Required CSS import\n\nconst workflow = {\n  Comment: \"A simple minimal example\",\n  StartAt: \"Hello\",\n  States: {\n    Hello: {\n      Type: \"Task\",\n      Resource: \"arn:aws:lambda:us-east-1:123456789012:function:HelloWorld\",\n      End: true,\n    },\n  },\n};\n\nfunction App() {\n  return (\n    \u003cWorkflowViewer\n      definition={workflow}\n      theme=\"light\"\n      width={800}\n      height={600}\n    /\u003e\n  );\n}\n```\n\n### Loading from URL\n\n```tsx\nimport React from \"react\";\nimport { WorkflowViewer } from \"asl-viewer\";\nimport \"asl-viewer/dist/index.css\"; // Required CSS import\n\nfunction App() {\n  return (\n    \u003cWorkflowViewer\n      url=\"https://example.com/workflow.json\"\n      theme=\"light\"\n      width={800}\n      height={600}\n      onLoadStart={() =\u003e console.log(\"Loading...\")}\n      onLoadEnd={() =\u003e console.log(\"Loaded!\")}\n      onLoadError={(error) =\u003e console.error(\"Error:\", error)}\n    /\u003e\n  );\n}\n```\n\n### Loading from File Upload\n\n```tsx\nimport React, { useState } from \"react\";\nimport { WorkflowViewer, FileUploader } from \"asl-viewer\";\nimport \"asl-viewer/dist/index.css\"; // Required CSS import\n\nfunction App() {\n  const [selectedFile, setSelectedFile] = useState\u003cFile | null\u003e(null);\n\n  return (\n    \u003cdiv\u003e\n      \u003cFileUploader\n        onFileSelect={setSelectedFile}\n        theme={{\n          background: \"white\",\n          borderColor: \"#ddd\",\n          textColor: \"#333\",\n          infoColor: \"#007acc\",\n        }}\n      /\u003e\n      {selectedFile \u0026\u0026 (\n        \u003cWorkflowViewer\n          file={selectedFile}\n          theme=\"light\"\n          width={800}\n          height={600}\n        /\u003e\n      )}\n    \u003c/div\u003e\n  );\n}\n```\n\n### YAML Support\n\n```tsx\nimport React from \"react\";\nimport { WorkflowViewer } from \"asl-viewer\";\n\nconst yamlWorkflow = `\nComment: \"A workflow in YAML format\"\nStartAt: \"HelloWorld\"\nStates:\n  HelloWorld:\n    Type: \"Pass\"\n    Result: \"Hello from YAML!\"\n    End: true\n`;\n\nfunction App() {\nfunction App() {\n  return (\n    \u003cWorkflowViewer\n      definition={yamlWorkflow}\n      theme=\"light\"\n      width={800}\n      height={600}\n    /\u003e\n  );\n}\n```\n\n### Interactive Mode with Draggable Nodes\n\n```tsx\nimport React from \"react\";\nimport { WorkflowViewer } from \"asl-viewer\";\n\nfunction App() {\n  return (\n    \u003cWorkflowViewer\n      definition={workflow}\n      theme=\"light\"\n      width={900}\n      height={700}\n      readonly={false}\n      isDraggable={true}\n      isSelectable={true}\n      isMultiSelect={true}\n      useMiniMap={true}\n      useControls={true}\n      onStateClick={(state) =\u003e {\n        console.log(\"State clicked:\", state);\n      }}\n    /\u003e\n  );\n}\n```\n\n### Presentation Mode (Read-Only)\n\n```tsx\nimport React from \"react\";\nimport { WorkflowViewer } from \"asl-viewer\";\n\nfunction App() {\n  return (\n    \u003cWorkflowViewer\n      definition={workflow}\n      theme=\"light\"\n      width={800}\n      height={600}\n      readonly={true}\n      useControls={false}\n      useMiniMap={false}\n      isDraggable={false}\n      isSelectable={false}\n      useZoom={false}\n    /\u003e\n  );\n}\n```\n\n### Enhanced Navigation with MiniMap\n\n```tsx\nimport React from \"react\";\nimport { WorkflowViewer } from \"asl-viewer\";\n\nfunction App() {\n  return (\n    \u003cWorkflowViewer\n      definition={complexWorkflow}\n      theme=\"dark\"\n      width={1000}\n      height={800}\n      useMiniMap={true}\n      useControls={true}\n      useFitView={true}\n      useZoom={true}\n    /\u003e\n  );\n}\n```\n\n## Supported Formats\n\nASL Viewer supports multiple input formats and sources:\n\n### Input Sources\n\n- **Definition Object**: Pass ASL definition directly as JavaScript object\n- **URL**: Load from any accessible URL (supports CORS)\n- **File Upload**: Upload local JSON or YAML files via file picker or drag \u0026 drop\n\n### File Formats\n\n- **JSON**: Standard ASL format as used by AWS Step Functions\n- **YAML**: Human-readable YAML format with same structure as JSON\n\n### Content Types\n\nThe library automatically detects format based on:\n\n- File extension (`.json`, `.yaml`, `.yml`)\n- MIME type (`application/json`, `application/yaml`, `text/yaml`)\n- Content analysis (fallback parsing)\n\n### Example Files\n\n```bash\n# JSON format\n{\n  \"Comment\": \"A simple workflow\",\n  \"StartAt\": \"FirstState\",\n  \"States\": {\n    \"FirstState\": {\n      \"Type\": \"Pass\",\n      \"End\": true\n    }\n  }\n}\n\n# YAML format\nComment: \"A simple workflow\"\nStartAt: \"FirstState\"\nStates:\n  FirstState:\n    Type: \"Pass\"\n    End: true\n```\n\n## API Reference\n\n### WorkflowViewer Props\n\n| Prop                | Type                               | Default   | Description                                 |\n| ------------------- | ---------------------------------- | --------- | ------------------------------------------- |\n| `definition`        | `ASLDefinition \\| string`          | -         | The ASL workflow definition (JSON or YAML)  |\n| `url`               | `string`                           | -         | URL to load the ASL definition from         |\n| `file`              | `File`                             | -         | File object containing the ASL definition   |\n| `theme`             | `'light' \\| 'dark'`                | `'light'` | Visual theme                                |\n| `layoutDirection`   | `'TB' \\| 'LR'`                     | `'TB'`    | Layout direction (Top-Bottom or Left-Right) |\n| `width`             | `number`                           | `800`     | Viewer width in pixels                      |\n| `height`            | `number`                           | `600`     | Viewer height in pixels                     |\n| `readonly`          | `boolean`                          | `true`    | Whether the viewer is read-only             |\n| `isConnectable`     | `boolean`                          | `true`    | Whether nodes can be connected              |\n| `isDraggable`       | `boolean`                          | `false`   | Whether nodes can be dragged                |\n| `isSelectable`      | `boolean`                          | `true`    | Whether nodes can be selected               |\n| `isMultiSelect`     | `boolean`                          | `false`   | Whether multiple nodes can be selected      |\n| `useMiniMap`        | `boolean`                          | `false`   | Whether to show navigation minimap          |\n| `useControls`       | `boolean`                          | `true`    | Whether to show zoom/pan controls           |\n| `useZoom`           | `boolean`                          | `true`    | Whether zooming is enabled                  |\n| `useFitView`        | `boolean`                          | `true`    | Whether to auto-fit view to show all nodes  |\n| `showToolbar`       | `boolean`                          | `false`   | Whether to show the toolbar                 |\n| `hideComment`       | `boolean`                          | `false`   | Whether to hide the workflow comment        |\n| `onStateClick`      | `(state: StateNode) =\u003e void`       | -         | Callback when a state is clicked            |\n| `onValidationError` | `(error: ValidationError) =\u003e void` | -         | Callback for validation errors              |\n| `onLoadStart`       | `() =\u003e void`                       | -         | Callback when loading starts                |\n| `onLoadEnd`         | `() =\u003e void`                       | -         | Callback when loading completes             |\n| `onLoadError`       | `(error: Error) =\u003e void`           | -         | Callback when loading fails                 |\n| `className`         | `string`                           | -         | Additional CSS class names                  |\n| `style`             | `React.CSSProperties`              | -         | Inline styles for the root container        |\n\n**Note:** You must provide exactly one of `definition`, `url`, or `file`.\n\n## Usage Modes\n\n### Interactive Mode\n\nEnable full interactivity with draggable nodes, multi-selection, and comprehensive controls:\n\n```tsx\n\u003cWorkflowViewer\n  definition={workflow}\n  readonly={false}\n  isDraggable={true}\n  isSelectable={true}\n  isMultiSelect={true}\n  useMiniMap={true}\n  useControls={true}\n  onStateClick={(state) =\u003e console.log(\"Clicked:\", state)}\n/\u003e\n```\n\n### Presentation Mode\n\nPerfect for presentations or documentation with minimal UI:\n\n```tsx\n\u003cWorkflowViewer\n  definition={workflow}\n  readonly={true}\n  useControls={false}\n  useMiniMap={false}\n  isDraggable={false}\n  isSelectable={false}\n  useZoom={false}\n/\u003e\n```\n\n### Navigation Mode\n\nIdeal for complex workflows with enhanced navigation features:\n\n```tsx\n\u003cWorkflowViewer\n  definition={largeWorkflow}\n  useMiniMap={true}\n  useControls={true}\n  useFitView={true}\n  useZoom={true}\n  width={1000}\n  height={800}\n/\u003e\n```\n\n### Horizontal Layout\n\nDisplay the workflow from left to right instead of top to bottom:\n\n```tsx\n\u003cWorkflowViewer\n  definition={workflow}\n  layoutDirection=\"LR\"\n  width={1000}\n  height={600}\n/\u003e\n```\n\n### Embedded Mode\n\nCompact view for embedding in dashboards or smaller spaces:\n\n```tsx\n\u003cWorkflowViewer\n  definition={simpleWorkflow}\n  width={400}\n  height={300}\n  useControls={false}\n  useMiniMap={false}\n  useFitView={true}\n/\u003e\n```\n\n### FileUploader Props\n\n| Prop           | Type                   | Default              | Description                      |\n| -------------- | ---------------------- | -------------------- | -------------------------------- |\n| `onFileSelect` | `(file: File) =\u003e void` | **required**         | Callback when a file is selected |\n| `theme`        | `ViewerTheme`          | **required**         | Theme object for styling         |\n| `accept`       | `string`               | `\".json,.yaml,.yml\"` | File types to accept             |\n| `disabled`     | `boolean`              | `false`              | Whether the uploader is disabled |\n| `className`    | `string`               | -                    | Additional CSS class names       |\n| `style`        | `React.CSSProperties`  | -                    | Inline styles                    |\n\n### URLInput Props\n\n| Prop          | Type                    | Default                            | Description                    |\n| ------------- | ----------------------- | ---------------------------------- | ------------------------------ |\n| `onUrlSubmit` | `(url: string) =\u003e void` | **required**                       | Callback when URL is submitted |\n| `theme`       | `ViewerTheme`           | **required**                       | Theme object for styling       |\n| `disabled`    | `boolean`               | `false`                            | Whether the input is disabled  |\n| `placeholder` | `string`                | `\"Enter URL to ASL definition...\"` | Placeholder text               |\n| `className`   | `string`                | -                                  | Additional CSS class names     |\n| `style`       | `React.CSSProperties`   | -                                  | Inline styles                  |\n\n### Types\n\n```tsx\nimport type {\n  ASLDefinition,\n  StateDefinition,\n  StateType,\n  ValidationError,\n  WorkflowViewerProps,\n  ViewerTheme,\n  StateNode,\n} from \"asl-viewer\";\n```\n\n### Utilities\n\n```tsx\nimport {\n  validateASLDefinition,\n  parseASLDefinition,\n  createGraphLayout,\n  loadFromURL,\n  loadFromFile,\n  parseDefinitionString,\n} from \"asl-viewer\";\n\n// Validate an ASL definition\nconst errors = validateASLDefinition(workflow);\n\n// Load from URL\nconst workflowFromUrl = await loadFromURL(\"https://example.com/workflow.json\");\n\n// Load from file\nconst workflowFromFile = await loadFromFile(file);\n\n// Parse string (JSON or YAML)\nconst workflowFromString = parseDefinitionString(yamlOrJsonString);\n\n// Parse and get structured data\nconst parsed = parseASLDefinition(workflow);\n\n// Create custom layout\nconst layout = createGraphLayout(parsed.nodes, parsed.connections);\n```\n\n## Supported ASL Features\n\n- ✅ **Task States** - Lambda functions, activities, and other tasks\n- ✅ **Choice States** - Conditional branching with choice rules\n- ✅ **Pass States** - Data transformation and flow control\n- ✅ **Wait States** - Delays and timeouts\n- ✅ **Succeed/Fail States** - Terminal states\n- ✅ **Parallel States** - Concurrent execution branches\n- ✅ **Map States** - Iteration over arrays (basic support)\n- ✅ **Retry/Catch** - Error handling configuration\n- ✅ **Input/Output Processing** - Path expressions and filters\n\n## Feature Configuration\n\n### Interactive Features\n\nControl user interactions with the workflow:\n\n```tsx\n// Enable all interactive features\n\u003cWorkflowViewer\n  definition={workflow}\n  readonly={false}\n  isDraggable={true}        // Drag nodes around\n  isSelectable={true}       // Click to select nodes\n  isMultiSelect={true}      // Select multiple nodes\n  isConnectable={true}      // Connect nodes (if applicable)\n/\u003e\n\n// Read-only with selection only\n\u003cWorkflowViewer\n  definition={workflow}\n  readonly={true}\n  isSelectable={true}\n  isDraggable={false}\n  isMultiSelect={false}\n/\u003e\n```\n\n### Navigation Controls\n\nConfigure zoom, pan, and navigation features:\n\n```tsx\n// Full navigation controls\n\u003cWorkflowViewer\n  definition={workflow}\n  useControls={true}        // Show zoom/pan buttons\n  useZoom={true}           // Enable zoom functionality\n  useFitView={true}        // Auto-fit content to view\n  useMiniMap={true}        // Show minimap for navigation\n/\u003e\n\n// Minimal navigation\n\u003cWorkflowViewer\n  definition={workflow}\n  useControls={false}\n  useZoom={false}\n  useFitView={true}\n  useMiniMap={false}\n/\u003e\n```\n\n### Event Handling\n\nHandle user interactions and loading events:\n\n```tsx\n\u003cWorkflowViewer\n  definition={workflow}\n  onStateClick={(state) =\u003e {\n    console.log(\"State clicked:\", state.name, state.type);\n    // Handle state selection, show details, etc.\n  }}\n  onValidationError={(error) =\u003e {\n    console.error(\"Validation error:\", error.message);\n    // Handle validation errors\n  }}\n  onLoadStart={() =\u003e {\n    console.log(\"Loading workflow...\");\n    // Show loading indicator\n  }}\n  onLoadEnd={() =\u003e {\n    console.log(\"Workflow loaded successfully\");\n    // Hide loading indicator\n  }}\n  onLoadError={(error) =\u003e {\n    console.error(\"Failed to load workflow:\", error);\n    // Show error message\n  }}\n/\u003e\n```\n\n## Examples\n\nCheck out the `/examples` directory for complete usage examples:\n\n- [Simple React App](./examples/react-app-example.tsx)\n- [Complex Workflows](./examples/complex-workflow.json)\n- [Parallel Execution](./examples/parallel-workflow.json)\n\n## Development\n\n### Setup\n\n```bash\ngit clone \u003crepository\u003e\ncd asl-viewer\nyarn install\n```\n\n### Build\n\n```bash\nyarn build\n```\n\n### Storybook\n\nRun Storybook locally for development:\n\n```bash\nyarn storybook\n```\n\nBuild Storybook for production:\n\n```bash\nyarn build-storybook\n```\n\nThe Storybook is automatically deployed to GitHub Pages at [https://cleissonb.github.io/asl-viewer/](https://cleissonb.github.io/asl-viewer/) when changes are pushed to the main branch.\n\n### Testing\n\n```bash\nyarn test\n```\n\n## Customization\n\n### Custom Themes\n\n#### Example 1:\n\n```tsx\nimport { WorkflowViewer, getTheme } from \"asl-viewer\";\nimport \"asl-viewer/dist/index.css\"; // Don't forget the CSS import\n\nconst customTheme = {\n  ...getTheme(\"light\"),\n  nodeColors: {\n    ...getTheme(\"light\").nodeColors,\n    taskState: \"#ff6b6b\",\n    choiceState: \"#4ecdc4\",\n  },\n};\n\n\u003cWorkflowViewer definition={workflow} theme={customTheme} /\u003e;\n```\n\n#### Example 2:\n\n```tsx\nimport { WorkflowViewer, createCustomTheme } from \"asl-viewer\";\nimport \"asl-viewer/dist/index.css\"; // Don't forget the CSS import\n\nconst customPurple = createCustomTheme(\"dark\", {\n  name: \"customPurple\",\n  background: \"#1a0033\",\n  surfaceColor: \"#2d1b69\",\n  nodeColors: {\n    task: \"#4c1d95\",\n    choice: \"#7c2d12\",\n    succeed: \"#065f46\",\n  },\n  nodeBorderColors: {\n    task: \"#8b5cf6\",\n    choice: \"#f59e0b\",\n    succeed: \"#10b981\",\n  },\n  textColor: \"#e879f9\",\n  connectionColor: \"#c084fc\",\n  tooltipBackground: \"#3c004d\",\n  tooltipTextColor: \"#f0f0f0\",\n});\n\n\u003cWorkflowViewer definition={workflow} theme={customPurple} /\u003e;\n```\n\n## Contributing\n\n1. Fork the repository\n2. Create a feature branch: `git checkout -b feature-name`\n3. Make your changes\n4. Add tests for new functionality\n5. Run the test suite: `yarn test`\n6. Submit a pull request\n\n## License\n\nThis project is licensed under the Apache License 2.0 - see the [LICENSE](LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcleissonbarbosa%2Fasl-viewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcleissonbarbosa%2Fasl-viewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcleissonbarbosa%2Fasl-viewer/lists"}