Data Flow Diagram (a la STRIDE Threat Model)

[pbnj]

Is your feature request related to a problem? Please describe.

I am curious if there is a way to generate a Data Flow Diagram using Mermaid (see example screenshot below).

Data Flow Diagrams are common in software Threat Modelling, especially the STRIDE threat model methodology.

Describe the solution you'd like

A a flow graph or stateDiagram are very similar in concept. In fact, if there is a way to use custom shapes and denote the type of node, then it may very well be possible to achieve this today.

For example, the following Mermaid code would generate the screenshot below:

graph
    DataStore[|Database|] -->|input| Process((System)) -->|output| Entity[Customer]

Where:

• A node surrounded by [| |] denotes a Data Store
• A node surrounded by (( )) denotes a Process or Function
• A node surrounded by [ ] denotes an External Entity
• Arrows, -->|label| denotes a Data Flow labeled as label

Besides a few shapes that are missing (e.g. Data Store represented by horizontal parallel lines), all shapes would also need to be available in solid lines and dashed/dotted lines, which denotes being out-of-scope.

Additional context

Simple Data Flow Diagram:

[maiermic]

You can use graph TD as a hacky solution by using

style DataStoreNode height width

where height and width refer to the rendered DataStoreNode. In your example, this would be

graph LR
    DataStore[Database] -->|input| Process((System)) -->|output| Entity[Customer]
    style DataStore stroke-dasharray: 88.5 44

Loading

which is rendered by the Mermaid Live Editor

if image is copied to clipboard as PNG. However, if you copy it as markdown, the height (and width?) are somehow different 🤔

It seems that height has to be 39 if you copy it as markdown

graph LR
    DataStore[Database] -->|input| Process((System)) -->|output| Entity[Customer]
    style DataStore stroke-dasharray: 88.5 39

Loading

As I said in the beginning, this is a hacky solution 😉 😅

[fguisso]

Just one more example if anyone needs.

flowchart LR
    user(user)
    mobile((mobile\napplication))
    proxy((reverse\nproxy))
    api((API))
    db[|borders:tb|database]

    subgraph external [Internet]
        user--personal data-->mobile
        mobile-->proxy
    end
    subgraph dmz [Internal Network]
        proxy-->api
        db-->api
        api-->db
    end
    classDef boundary fill:none,stroke-dasharray: 5 5
    dmz:::boundary
    external:::boundary

Loading

flowchart LR
    user(user)
    mobile((mobile\napplication))
    proxy((reverse\nproxy))
    api((API))
    db[|borders:tb|database]

    subgraph external [Internet]
        user--personal data-->mobile
        mobile-->proxy
    end
    subgraph dmz [Internal Network]
        proxy-->api
        db-->api
        api-->db
    end
    classDef boundary fill:none,stroke-dasharray: 5 5
    dmz:::boundary
    external:::boundary