Flow editor docs

.changeset/lemon-ligers-deliver.md

@@ -0,0 +1,5 @@
+---
+"docs": patch
+---
+
+Create documentation pages for flow-editor and graphviz-rendering.

sites/docs/docs/flow-editor.mdx

@@ -0,0 +1,32 @@
+---
+id: flow-editor
+title: Flow editor component
+---
+
+## Overview
+
+We provide a visual editor for creation and modification of `use-coordination` configs using their graph-based representation.
+The functionality described on this page is available in the sub-package `@use-coordination/flow-editor` (and not contained in the main `use-coordination` package).
+
+
+## `<FlowEditor/>`
+
+### Required props
+
+#### `config`
+
+- Type: `object`
+
+
+### Optional props
+
+#### `onConfigChange`
+
+- Type: `function`
+
+A callback function that emits config updates upon changes in the editor.
+
+
+```js
+import { FlowEditor } from '@use-coordination/flow-editor';
+```

sites/docs/docs/graphviz-rendering.mdx

@@ -0,0 +1,29 @@
+---
+id: graphviz-rendering
+title: Graphviz rendering
+---
+
+## Overview
+
+We provide a function to render a `use-coordination` config to [Graphviz](https://graphviz.org/) [DOT](https://graphviz.org/doc/info/lang.html) format.
+The functionality described on this page is available in the sub-package `@use-coordination/graphviz-renderer` (and not contained in the main `use-coordination` package).
+
+
+To make this approach as modular as possible, we do not include the functionality to render the DOT-formatted string to an image.
+We leave the choice of Graphviz rendering engine to the user.
+
+## `toGraphviz(config)`
+
+#### Parameters:
+
+- `config` (`object`) - The config to render to DOT format.
+
+#### Returns:
+
+- Type: `string` - The DOT-formatted string.
+
+```js
+import { toGraphviz } from '@use-coordination/graphviz-renderer';
+```
+
+

sites/docs/sidebars.js

@@ -24,6 +24,14 @@ module.exports = {
       type: 'doc',
       id: 'config-js',
     },
+    {
+      type: 'doc',
+      id: 'flow-editor',
+    },
+    {
+      type: 'doc',
+      id: 'graphviz-rendering',
+    }
   ],
   examples: [
     {