@groupby/ai-dev 0.5.10 → 0.5.11

package/teams/fhr-neowise/skills/mermaid-diagram/references/treeView.md

@@ -0,0 +1,321 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/treeView.md](../../packages/mermaid/src/docs/syntax/treeView.md).
+
+# TreeView Diagram (v11.14.0+)
+
+## Introduction
+
+A TreeView diagram is used to represent hierarchical data in the form of a directory-like structure, with file-type icons, connector lines, and optional annotations.
+
+## Syntax
+
+The structure of the tree depends only on indentation. Labels can be **bare** (unquoted) or **quoted** (for names containing spaces).
+
+- Directories are indicated by a trailing `/` on the label — they get a folder icon and bold text.
+- Files are auto-detected by extension and assigned a matching icon.
+- Quoted labels (`"my file"`) support spaces in names.
+
+```
+treeView-beta
+    my-project/
+        src/
+            index.js
+        package.json
+        README.md
+```
+
+Quoted labels (backward compatible):
+
+```
+treeView-beta
+    "my project"
+        "folder with spaces"
+            "file.js"
+```
+
+## Box-Drawing Input
+
+As an alternative to indentation, you can use box-drawing characters to define the tree structure. The parser auto-detects the format — no extra keyword or config is needed. This is how most file tree diagrams are drawn already, so you can turn those into Mermaid diagrams with very little effort.
+
+Both standard (`├──`, `└──`, `│`) and heavy (`┣━━`, `┗━━`, `┃`) Unicode variants are supported.
+
+```mermaid-example
+treeView-beta
+├── src/
+│   ├── index.ts
+│   └── utils.ts
+├── package.json
+└── README.md
+```
+
+```mermaid
+treeView-beta
+├── src/
+│   ├── index.ts
+│   └── utils.ts
+├── package.json
+└── README.md
+```
+
+All annotations work the same way — just append them after the label:
+
+```mermaid-example
+treeView-beta
+├── src/
+│   ├── App.tsx :::highlight icon(react) ## main component
+│   └── index.ts ## entry point
+├── .env ## environment variables
+├── Dockerfile
+└── package.json
+```
+
+```mermaid
+treeView-beta
+├── src/
+│   ├── App.tsx :::highlight icon(react) ## main component
+│   └── index.ts ## entry point
+├── .env ## environment variables
+├── Dockerfile
+└── package.json
+```
+
+Depth is inferred from the column position of the branch character, so deeper nesting works naturally:
+
+```mermaid-example
+treeView-beta
+├── packages/
+│   ├── mermaid/
+│   │   ├── src/
+│   │   │   ├── parser.ts
+│   │   │   └── renderer.ts
+│   │   └── package.json
+│   └── parser/
+│       └── src/
+└── README.md
+```
+
+```mermaid
+treeView-beta
+├── packages/
+│   ├── mermaid/
+│   │   ├── src/
+│   │   │   ├── parser.ts
+│   │   │   └── renderer.ts
+│   │   └── package.json
+│   └── parser/
+│       └── src/
+└── README.md
+```
+
+> **Note:** If a parse error occurs, line numbers in the error message refer to your original input. Tab characters are automatically expanded to spaces.
+
+## Annotations
+
+### Highlighting with :::class
+
+Annotate a node with `:::className` to apply a CSS class. A built-in `highlight` class is provided:
+
+```mermaid-example
+treeView-beta
+    src/
+        App.tsx :::highlight
+        index.js
+    package.json
+```
+
+```mermaid
+treeView-beta
+    src/
+        App.tsx :::highlight
+        index.js
+    package.json
+```
+
+### Inline descriptions with `##`
+
+Add a visible description after `##` — rendered next to the label in italic:
+
+```mermaid-example
+treeView-beta
+    src/
+        index.js ## app entry point
+        config.ts ## runtime configuration
+    package.json ## project manifest
+```
+
+```mermaid
+treeView-beta
+    src/
+        index.js ## app entry point
+        config.ts ## runtime configuration
+    package.json ## project manifest
+```
+
+### Icon overrides with icon()
+
+Override the auto-detected icon with `icon(name)`:
+
+```mermaid-example
+treeView-beta
+    data/
+        model.bin icon(database)
+        weights.h5 icon(database)
+    src/
+        index.js
+```
+
+```mermaid
+treeView-beta
+    data/
+        model.bin icon(database)
+        weights.h5 icon(database)
+    src/
+        index.js
+```
+
+### Combined annotations
+
+Annotations can be combined in any order:
+
+```mermaid-example
+treeView-beta
+    my-project/
+        src/
+            App.tsx :::highlight icon(react) ## main component
+            index.js ## entry point
+        .env ## environment variables
+        Dockerfile
+        package.json
+```
+
+```mermaid
+treeView-beta
+    my-project/
+        src/
+            App.tsx :::highlight icon(react) ## main component
+            index.js ## entry point
+        .env ## environment variables
+        Dockerfile
+        package.json
+```
+
+## Comments
+
+Use `%%` for invisible comments (standard Mermaid convention):
+
+```
+treeView-beta
+    %% Generated files — do not edit
+    src/
+        generated/
+        index.js
+```
+
+## Examples
+
+Basic with quoted labels:
+
+```mermaid-example
+treeView-beta
+    "packages"
+        "mermaid"
+            "src"
+        "parser"
+```
+
+```mermaid
+treeView-beta
+    "packages"
+        "mermaid"
+            "src"
+        "parser"
+```
+
+With custom config:
+
+```mermaid-example
+---
+config:
+    treeView:
+        rowIndent: 80
+        lineThickness: 3
+    themeVariables:
+        treeView:
+            labelFontSize: '20px'
+            labelColor: '#FF0000'
+            lineColor: '#00FF00'
+---
+treeView-beta
+    "packages"
+        "mermaid"
+            "src"
+        "parser"
+```
+
+```mermaid
+---
+config:
+    treeView:
+        rowIndent: 80
+        lineThickness: 3
+    themeVariables:
+        treeView:
+            labelFontSize: '20px'
+            labelColor: '#FF0000'
+            lineColor: '#00FF00'
+---
+treeView-beta
+    "packages"
+        "mermaid"
+            "src"
+        "parser"
+```
+
+## Config Variables
+
+| Property      | Description                       | Default Value |
+| ------------- | --------------------------------- | ------------- |
+| rowIndent     | Indentation for each row          | 10            |
+| paddingX      | Horizontal padding of row         | 5             |
+| paddingY      | Vertical padding of row           | 5             |
+| lineThickness | Thickness of the line             | 1             |
+| showIcons     | Whether to show file/folder icons | true          |
+
+### Theme Variables
+
+| Property         | Description                    | Default Value        |
+| ---------------- | ------------------------------ | -------------------- |
+| labelFontSize    | Font size of the label         | '16px'               |
+| labelColor       | Color of the label             | 'black'              |
+| lineColor        | Color of the line              | 'black'              |
+| iconColor        | Color of file-type icons       | '#546e7a'            |
+| descriptionColor | Color of `##` description text | '#6a9955'            |
+| highlightBg      | Highlight background fill      | rgba(255,193,7,0.15) |
+| highlightStroke  | Highlight border stroke        | #ffc107              |
+
+## Supported Icons
+
+Icons are auto-detected from file extensions and known filenames:
+
+| Extension / Filename  | Icon       |
+| --------------------- | ---------- |
+| `.js`, `.mjs`, `.cjs` | javascript |
+| `.ts`                 | typescript |
+| `.jsx`, `.tsx`        | react      |
+| `.py`                 | python     |
+| `.json`               | json       |
+| `.md`, `.mdx`         | markdown   |
+| `.html`, `.htm`       | html       |
+| `.css`, `.scss`       | css        |
+| `.yaml`, `.yml`       | yaml       |
+| `.sh`, `.bash`        | terminal   |
+| `.sql`, `.db`         | database   |
+| `.lock`               | lock       |
+| `.gitignore`          | git        |
+| `Dockerfile`          | docker     |
+| `Makefile`            | terminal   |
+| Directories (`/`)     | folder     |
+| Unknown extension     | file       |

package/teams/fhr-neowise/skills/mermaid-diagram/references/treemap.md

@@ -0,0 +1,353 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/treemap.md](../../packages/mermaid/src/docs/syntax/treemap.md).
+
+# Treemap Diagram
+
+> A treemap diagram displays hierarchical data as a set of nested rectangles. Each branch of the tree is represented by a rectangle, which is then tiled with smaller rectangles representing sub-branches.
+
+> **Warning**
+> This is a new diagram type in Mermaid. Its syntax may evolve in future versions.
+
+## Introduction
+
+Treemap diagrams are an effective way to visualize hierarchical data and show proportions between categories and subcategories. The size of each rectangle is proportional to the value it represents, making it easy to compare different parts of a hierarchy.
+
+Treemap diagrams are particularly useful for:
+
+- Visualizing hierarchical data structures
+- Comparing proportions between categories
+- Displaying large amounts of hierarchical data in a limited space
+- Identifying patterns and outliers in hierarchical data
+
+## Syntax
+
+```
+treemap-beta
+"Section 1"
+    "Leaf 1.1": 12
+    "Section 1.2"
+      "Leaf 1.2.1": 12
+"Section 2"
+    "Leaf 2.1": 20
+    "Leaf 2.2": 25
+```
+
+### Node Definition
+
+Nodes in a treemap are defined using the following syntax:
+
+- **Section/Parent nodes**: Defined with quoted text `"Section Name"`
+- **Leaf nodes with values**: Defined with quoted text followed by a colon and value `"Leaf Name": value`
+- **Hierarchy**: Created using indentation (spaces or tabs)
+- **Styling**: Nodes can be styled using the `:::class` syntax
+
+## Examples
+
+### Basic Treemap
+
+```mermaid-example
+treemap-beta
+"Category A"
+    "Item A1": 10
+    "Item A2": 20
+"Category B"
+    "Item B1": 15
+    "Item B2": 25
+```
+
+```mermaid
+treemap-beta
+"Category A"
+    "Item A1": 10
+    "Item A2": 20
+"Category B"
+    "Item B1": 15
+    "Item B2": 25
+```
+
+### Hierarchical Treemap
+
+```mermaid-example
+treemap-beta
+"Products"
+    "Electronics"
+        "Phones": 50
+        "Computers": 30
+        "Accessories": 20
+    "Clothing"
+        "Men's": 40
+        "Women's": 40
+```
+
+```mermaid
+treemap-beta
+"Products"
+    "Electronics"
+        "Phones": 50
+        "Computers": 30
+        "Accessories": 20
+    "Clothing"
+        "Men's": 40
+        "Women's": 40
+```
+
+### Treemap with Styling
+
+```mermaid-example
+treemap-beta
+"Section 1"
+    "Leaf 1.1": 12
+    "Section 1.2":::class1
+      "Leaf 1.2.1": 12
+"Section 2"
+    "Leaf 2.1": 20:::class1
+    "Leaf 2.2": 25
+    "Leaf 2.3": 12
+
+classDef class1 fill:red,color:blue,stroke:#FFD600;
+```
+
+```mermaid
+treemap-beta
+"Section 1"
+    "Leaf 1.1": 12
+    "Section 1.2":::class1
+      "Leaf 1.2.1": 12
+"Section 2"
+    "Leaf 2.1": 20:::class1
+    "Leaf 2.2": 25
+    "Leaf 2.3": 12
+
+classDef class1 fill:red,color:blue,stroke:#FFD600;
+```
+
+## Styling and Configuration
+
+Treemap diagrams can be customized using Mermaid's styling and configuration options.
+
+### Using classDef for Styling
+
+You can define custom styles for nodes using the `classDef` syntax, which is a standard feature across many Mermaid diagram types:
+
+```mermaid-example
+treemap-beta
+"Main"
+    "A": 20
+    "B":::important
+        "B1": 10
+        "B2": 15
+    "C": 5
+
+classDef important fill:#f96,stroke:#333,stroke-width:2px;
+```
+
+```mermaid
+treemap-beta
+"Main"
+    "A": 20
+    "B":::important
+        "B1": 10
+        "B2": 15
+    "C": 5
+
+classDef important fill:#f96,stroke:#333,stroke-width:2px;
+```
+
+### Theme Configuration
+
+You can customize the colors of your treemap using the theme configuration:
+
+```mermaid-example
+---
+config:
+    theme: 'forest'
+---
+treemap-beta
+"Category A"
+    "Item A1": 10
+    "Item A2": 20
+"Category B"
+    "Item B1": 15
+    "Item B2": 25
+```
+
+```mermaid
+---
+config:
+    theme: 'forest'
+---
+treemap-beta
+"Category A"
+    "Item A1": 10
+    "Item A2": 20
+"Category B"
+    "Item B1": 15
+    "Item B2": 25
+```
+
+### Diagram Padding
+
+You can adjust the padding around the treemap diagram using the `diagramPadding` configuration option:
+
+```mermaid-example
+---
+config:
+  treemap:
+    diagramPadding: 200
+---
+treemap-beta
+"Category A"
+    "Item A1": 10
+    "Item A2": 20
+"Category B"
+    "Item B1": 15
+    "Item B2": 25
+```
+
+```mermaid
+---
+config:
+  treemap:
+    diagramPadding: 200
+---
+treemap-beta
+"Category A"
+    "Item A1": 10
+    "Item A2": 20
+"Category B"
+    "Item B1": 15
+    "Item B2": 25
+```
+
+## Configuration Options
+
+The treemap diagram supports the following configuration options:
+
+| Option         | Description                                                                 | Default |
+| -------------- | --------------------------------------------------------------------------- | ------- |
+| useMaxWidth    | When true, the diagram width is set to 100% and scales with available space | true    |
+| padding        | Internal padding between nodes                                              | 10      |
+| diagramPadding | Padding around the entire diagram                                           | 8       |
+| showValues     | Whether to show values in the treemap                                       | true    |
+| nodeWidth      | Width of nodes                                                              | 100     |
+| nodeHeight     | Height of nodes                                                             | 40      |
+| borderWidth    | Width of borders                                                            | 1       |
+| valueFontSize  | Font size for values                                                        | 12      |
+| labelFontSize  | Font size for labels                                                        | 14      |
+| valueFormat    | Format for values (see Value Formatting section)                            | ','     |
+
+## Advanced Features
+
+### Value Formatting
+
+Values in treemap diagrams can be formatted to display in different ways using the `valueFormat` configuration option. This option primarily uses [D3's format specifiers](https://github.com/d3/d3-format#locale_format) to control how numbers are displayed, with some additional special cases for common formats.
+
+Some common format patterns:
+
+- `,` - Thousands separator (default)
+- `$` - Add dollar sign
+- `.1f` - Show one decimal place
+- `.1%` - Show as percentage with one decimal place
+- `$0,0` - Dollar sign with thousands separator
+- `$.2f` - Dollar sign with 2 decimal places
+- `$,.2f` - Dollar sign with thousands separator and 2 decimal places
+
+The treemap diagram supports both standard D3 format specifiers and some common currency formats that combine the dollar sign with other formatting options.
+
+Example with currency formatting:
+
+```mermaid-example
+---
+config:
+  treemap:
+    valueFormat: '$0,0'
+---
+treemap-beta
+"Budget"
+    "Operations"
+        "Salaries": 700000
+        "Equipment": 200000
+        "Supplies": 100000
+    "Marketing"
+        "Advertising": 400000
+        "Events": 100000
+```
+
+```mermaid
+---
+config:
+  treemap:
+    valueFormat: '$0,0'
+---
+treemap-beta
+"Budget"
+    "Operations"
+        "Salaries": 700000
+        "Equipment": 200000
+        "Supplies": 100000
+    "Marketing"
+        "Advertising": 400000
+        "Events": 100000
+```
+
+Example with percentage formatting:
+
+```mermaid-example
+---
+config:
+  treemap:
+    valueFormat: '$.1%'
+---
+treemap-beta
+"Market Share"
+    "Company A": 0.35
+    "Company B": 0.25
+    "Company C": 0.15
+    "Others": 0.25
+```
+
+```mermaid
+---
+config:
+  treemap:
+    valueFormat: '$.1%'
+---
+treemap-beta
+"Market Share"
+    "Company A": 0.35
+    "Company B": 0.25
+    "Company C": 0.15
+    "Others": 0.25
+```
+
+## Common Use Cases
+
+Treemap diagrams are commonly used for:
+
+1. **Financial Data**: Visualizing budget allocations, market shares, or portfolio compositions
+2. **File System Analysis**: Showing disk space usage by folders and files
+3. **Population Demographics**: Displaying population distribution across regions and subregions
+4. **Product Hierarchies**: Visualizing product categories and their sales volumes
+5. **Organizational Structures**: Representing departments and team sizes in a company
+
+## Limitations
+
+- Treemap diagrams work best when the data has a natural hierarchy
+- Very small values may be difficult to see or label in a treemap diagram
+- Deep hierarchies (many levels) can be challenging to represent clearly
+- Treemap diagrams are not well suited for representing data with negative values
+
+## Related Diagrams
+
+If treemap diagrams don't suit your needs, consider these alternatives:
+
+- [**Pie Charts**](./pie.md): For simple proportion comparisons without hierarchy
+- **Sunburst Diagrams**: For hierarchical data with a radial layout (yet to be released in Mermaid).
+- [**Sankey Diagrams**](./sankey.md): For flow-based hierarchical data
+
+## Notes
+
+The treemap diagram implementation in Mermaid is designed to be simple to use while providing powerful visualization capabilities. As this is a newer diagram type, feedback and feature requests are welcome through the Mermaid GitHub repository.

package/teams/fhr-neowise/skills/mermaid-diagram/references/userJourney.md

@@ -0,0 +1,42 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/userJourney.md](../../packages/mermaid/src/docs/syntax/userJourney.md).
+
+# User Journey Diagram
+
+> User journeys describe at a high level of detail exactly what steps different users take to complete a specific task within a system, application or website. This technique shows the current (as-is) user workflow, and reveals areas of improvement for the to-be workflow. (Wikipedia)
+
+Mermaid can render user journey diagrams:
+
+```mermaid-example
+journey
+    title My working day
+    section Go to work
+      Make tea: 5: Me
+      Go upstairs: 3: Me
+      Do work: 1: Me, Cat
+    section Go home
+      Go downstairs: 5: Me
+      Sit down: 5: Me
+```
+
+```mermaid
+journey
+    title My working day
+    section Go to work
+      Make tea: 5: Me
+      Go upstairs: 3: Me
+      Do work: 1: Me, Cat
+    section Go home
+      Go downstairs: 5: Me
+      Sit down: 5: Me
+```
+
+Each user journey is split into sections, these describe the part of the task
+the user is trying to complete.
+
+Tasks syntax is `Task name: <score>: <comma separated list of actors>`
+
+Score is a number between 1 and 5, inclusive.