support colors for (arrow) elements in sequence diagram

[SvenMeyer]

I tried to create a sequence diagram and assign colors to the arrows. Looks like the AI generated the right code, but it would be great to have it rendered as well without the need to setup some complicated infrastructure.

request to AI

if you look at my squence diagram code, you will see that i tried to apply colors to the various element, mainly the arrows. However all arrows still render in default black. can you fix that ?

response

The Mermaid syntax for sequence diagrams doesn't allow direct styling of the arrows through the Mermaid code itself. However, you can achieve this by overriding the default styles using CSS classes. Here's how you can modify your diagram to apply custom colors to the arrows using CSS:

Create CSS Classes: Define CSS classes for different types of message lines or specific message lines if needed.

Style the Specific Arrows: Use the %%init directive at the top of your diagram to specify custom styles.

Unfortunately, Mermaid doesn't allow in-line style changes for individual message arrows directly through the diagram syntax. Instead, you'll need to use external CSS in a webpage context or modify the Mermaid sequence SCSS theme, which is outside the capabilities of the Mermaid markdown directly.

Here is your updated sequence diagram with an additional comment on how this could theoretically be achieved through CSS customization in a broader context like a website:

%%{init: {
    'theme': 'base',
    'themeVariables': {
        'mainBkg': '#ffffff',
        'textColor': '#000000',
        'noteBkgColor': '#808080',
        'noteTextColor': '#000000',
        'signalColor': '#000000',
        'signalTextColor': '#000000',
        'primaryColor': '#FFA500',      /* Orange for asset tokens */
        'secondaryColor': '#FFD700',    /* Yellow for tokenized money */
        'tertiaryColor': '#4169E1',     /* Blue for fiat money */
        'lineColor': '#000000'          /* Black for info/commands */
    }
}}%%
sequenceDiagram
    participant EX as Exchange
    participant IN as Investor
    participant SC as Blockchain<br/>Smart Contracts
    participant MC as Mining Company
    participant PX as Company X

    rect rgb(240, 240, 240)
    Note right of MC: Asset Tokenization
    %% Info messages with dashed lines
    MC-->>PX: Royalty documents (info)
    PX-->>SC: Mint (command)
    %% Asset token transfer
    activate SC
    SC->>MC: DSR tokens (asset token)
    deactivate SC
    end

    rect rgb(240, 240, 240)
    Note right of IN: Money Tokenization
    %% Fiat money transfer
    activate EX
    IN->>EX: AUD (fiat money)
    %% Tokenized money transfer
    EX->>IN: Stable tokens (tokenised money)
    deactivate EX
    end

    rect rgb(240, 240, 240)
    Note right of SC: AtomicToken Exchange
    activate SC
    IN->>SC: Stable tokens (tokenised money)
    SC->>MC: Stable tokens (tokenised money)
    MC->>SC: DSR tokens (asset token)
    SC->>IN: DSR tokens (asset token)
    deactivate SC
    
    end

Loading

Note: The styling of arrows would typically need to be handled via CSS in a web environment by targeting the CSS classes used for message lines (like .messageLine0) and setting the stroke property to your desired color.

If you are using this as part of a website or have control over the HTML/CSS environment where this sequence diagram is displayed, you should define the CSS styles in the <style> section of your HTML. If you simply want to change colors and render within the Mermaid editor, you would need to consult with its customization options or integrate a platform where CSS can be applied.

Let me know if you have access to a platform where CSS customization is possible, and I can guide you further on specific CSS changes!

[SvenMeyer]

Eventually the AI had the idea to generate a HTML file with embedded CSS and mermaid code which I could open in a Chrome browser to visualize it. That worked, in general ...
However, I went to various iterations with the AI (until my free budget was exhasted), and it did not manage to come up with the code to give the arrow the color I wanted, actually not any color for the solid arrows.

AI response (last one)

Let's address the issue by revisiting the assignment of CSS classes to each message line in order to align with your requirements more effectively. We'll make sure each interaction is distinctly styled according to the token type.

Below is the corrected HTML code that specifies CSS styles for the different interactions, using unique identifiers to ensure proper CSS application:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mermaid Sequence Diagram</title>
    <script type="module">
        import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
        mermaid.initialize({ startOnLoad: true });
    </script>
    <style>
        /* Custom line colors for each specific type of interaction */
        .messageLine0 { stroke: #808080 !important; stroke-dasharray: 3; } /* Info - Gray */
        .messageLine1 { stroke: #FFA500 !important; } /* Mint Command - Orange */
        .messageLine2, .messageLine8, .messageLine10 { stroke: #FFA500 !important; } /* Asset Token Transfers - Orange */
        .messageLine3 { stroke: #4169E1 !important; } /* Fiat Money - Blue */
        .messageLine4, .messageLine5, .messageLine6, .messageLine7 { stroke: #FFD700 !important; } /* Tokenized Money - Yellow */
        .messageLine9 { stroke: #FFA500 !important; } /* Asset Token back to Investor - Orange */
    </style>
</head>
<body>
<div class="mermaid">
%%{init: {
    'theme': 'base',
    'themeVariables': {
        'mainBkg': '#ffffff',
        'textColor': '#000000',
        'noteBkgColor': '#808080',
        'noteTextColor': '#000000',
        'signalColor': '#000000',
        'signalTextColor': '#000000',
        'primaryColor': '#FFA500',      /* Orange for asset tokens */
        'secondaryColor': '#FFD700',    /* Yellow for tokenized money */
        'tertiaryColor': '#4169E1',     /* Blue for fiat money */
        'lineColor': '#000000'          /* Black for info/commands */
    }
}}%%
sequenceDiagram
    participant EX as Exchange
    participant IN as Investor
    participant SC as Blockchain<br/>Smart Contracts
    participant MC as Mining Company
    participant PX as Comapny-X

    rect rgb(240, 240, 240)
    Note right of MC: Asset Tokenization
    %% Info messages with dashed lines
    MC-->>PX: Royalty documents (info)
    PX-->>SC: Mint (command)
    %% Asset token transfer
    activate SC
    SC->>MC: DSR tokens (asset token)
    deactivate SC
    end

    rect rgb(240, 240, 240)
    Note right of IN: Money Tokenization
    %% Fiat money transfer
    activate EX
    IN->>EX: AUD (fiat money)
    %% Tokenized money transfer
    EX->>IN: Stable tokens (tokenised money)
    deactivate EX
    end

    rect rgb(240, 240, 240)
    Note right of SC: AtomicToken Exchange
    activate SC
    IN->>SC: Stable tokens (tokenised money)
    SC->>MC: Stable tokens (tokenised money)
    MC->>SC: DSR tokens (asset token)
    SC->>IN: DSR tokens (asset token)
    deactivate SC
    
    end
</div>
</body>
</html>

Explanation:
Dash Lines: Are intentionally gray for informational messages, styled with .messageLine0.
Colored Transfers: Other interactions are explicitly set to be orange, yellow, or blue based on the sequence of each operation and the desired color:
Orange for asset tokens using .messageLine2, .messageLine8, .messageLine10.
Yellow for tokenized money using .messageLine4, .messageLine5, .messageLine6, .messageLine7.
Blue for fiat money using .messageLine3.
This adjustment is designed to match the diagram lines with specific CSS styles, utilizing each line's order within the diagram to map it to the correct class. If any line appears out of expectation, confirm their sequential order when rendered with your specific diagram data. Adjust the CSS classes according to your needs.