Update family-state docs page

- Update docs
- Add diagram

docs/docs/family-state.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 7
+sidebar_position: 8
 ---
 
 # FamilyState
@@ -11,40 +11,22 @@ When requesting new node with `getNode` method, either [State](/state) or [Async
 
 Internally `FamilySate` is a read-only `State` object, hence it may be used in selectors, scenarios, effects or combined with promises. When some inner state is being loaded and has no value yet, it does not appear in `get` method result.
 
-```ts
-type Id = string;
+![FamilyState visual diagram](/diagrams/FamilyState.svg "FamilyState visual diagram")
 
-type FamilyState<T> = ReadableState<Record<Id, T>> & {
-  events: {
-    changed: AwaiEvent<Record<Id, T>>; // emits when state is created or any inner state emits `changed` event
-    stateCreated: AwaiEvent<Id>; // emits when new state is created with `getNode` method
-  };
-  getNode: (id: Id) => T;
-  setNode: (id: Id, stateNode: T) => void;
-};
+### Properties and methods
 
-interface Config {
-  id: string;
-  tags: string[];
-}
+- **get** - returns whole family object with with `State`/`AsyncState` values
+- **getNode** - returns existing or creates new `State`/`AsyncState` using initializer
+- **setNode** - is used to manually set a state for specific id. When used, `stateCreated` event is not emitted
+- **events** - record of [AwaiEvent](/awai-event) events
 
-function familyState<
-  T,
-  Initializer extends (id: Id) => T | Promise<T>,
-  Family extends Record<Id, NodeType>,
-  NodeType = ReturnType<Initializer> extends PromiseLike<infer Q>
-    ? AsyncState<Q>
-    : State<ReturnType<Initializer>>,
->(initializer: Initializer, config?: Partial<Config>): FamilyState<NodeType>;
-```
-
----
+### Events
 
-* `getNode` - returns existing or creates new `State` or `AsyncState` using initializer.
-* `setNode` - is used to manually set a state for specific id. When used, `stateCreated` event is not emitted.
+- **changed** - state is created or any inner state emitted `changed` event
+- **stateCreated** - new state is created with `getNode` method
 
 
-## Examples
+### Examples
 
 ```ts title="Family of sync states"
 const ID1 = 'id1';
@@ -113,5 +95,25 @@ activePersonState.get(); // 'Andrew'
 
 :::note
 Notice how `_namesStates` is ignored in selector predicate. In this example this argument is added only for clarity, that this argument is passed by selector.
-It is recommended to access node via `getNode` method, since it is safer in case if node does not exists yet.
+It is recommended to access node via `getNode` method, since it is safer in case if node does not exist yet.
 :::
+
+### Types
+
+[Source](https://github.com/yuriyyakym/awai/blob/master/src/family-state/types.ts)
+
+```ts
+interface Config {
+  id: string;
+  tags: string[];
+}
+
+function familyState<
+  T,
+  Initializer extends (id: Id) => T | Promise<T>,
+  Family extends Record<Id, NodeType>,
+  NodeType = ReturnType<Initializer> extends PromiseLike<infer Q>
+    ? AsyncState<Q>
+    : State<ReturnType<Initializer>>,
+>(initializer: Initializer, config?: Partial<Config>): FamilyState<NodeType>;
+```

docs/docs/scenario.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 8
+sidebar_position: 7
 ---
 
 # Scenario