Skip to content

Visual representation of influence diagrams and programmatic generation using Mermaid.js #10

Open
@jaantollander

Description

@jaantollander

The visual representation of influence diagrams requires visualizing nodes, information sets, and states. Nodes should have distinct shapes and colors. We should represent them in depth-wise order from left to right. For example:

  • Chance nodes: Circle, light-blue, stroke-width 3
  • Decision nodes: Square, light-green, stroke-width 3
  • Value node: Diamond (rhombus), orange, stroke-width 3
  • Information sets of chance and decision nodes: Normal arrows
  • Information sets of value nodes: Dashed arrows
  • Labels: Node ... <br> States: ...

We can create diagrams programmatically using Mermaid.js:

graph LR
    subgraph Chance and Decision Nodes
        %% Chance nodes
        1((Node: 1 <br> States: 2))
        2((Node: 2 <br> States: 2))
        1 --> 2
        class 1,2 chance

        %% Decision nodes
        3[Node: 3 <br> States: 2]
        4[Node: 4 <br> States: 3]
        1 --> 3
        1 & 2 & 3 --> 4
        class 3,4 decision
    end

    subgraph Value Nodes
        %% Value nodes
        5{Node 5}
        2 & 4 -.-> 5
        class 5 value
    end

    %% Styles
    classDef chance fill:lightblue,stroke:blue,stroke-width:3px;
    classDef decision fill:lightgreen,stroke:green,stroke-width:3px;
    classDef value fill:orange,stroke:darkorange,stroke-width:3px;
Loading

Mermaid syntax is explained in the documentation.

Designing influence diagrams is easier using diagrams.net. We can also import Mermaid diagrams to diagrams.net.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions