Created
January 18, 2025 17:12
-
-
Save Grace/99c4ed614ee358b6932ad20a18fe1ba0 to your computer and use it in GitHub Desktop.
Drools Rules Visualization #2 (C4 Diagram)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- Container for Mermaid Diagram --> | |
| <div id="mermaid"> | |
| <div class="mermaid"> | |
| %% Mermaid syntax goes here | |
| </div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Drools rules data representing interactions between rules | |
| const rulesData = [ | |
| { | |
| ruleName: "High-Value Transaction", | |
| description: "Flag high-value transactions above $10,000.", | |
| action: "Flag transaction as suspicious.", | |
| affectedRules: ["Transaction Monitoring"] | |
| }, | |
| { | |
| ruleName: "Frequent Small Transactions", | |
| description: "Flag customers with more than 5 transactions in 1 hour.", | |
| action: "Flag customer for suspicious behavior.", | |
| affectedRules: ["Transaction Monitoring"] | |
| }, | |
| { | |
| ruleName: "High-Risk Customer", | |
| description: "Mark customers with high risk level or history of fraud.", | |
| action: "Mark customer as high-risk.", | |
| affectedRules: ["Transaction Monitoring"] | |
| }, | |
| { | |
| ruleName: "Transaction Monitoring", | |
| description: "Monitor flagged transactions and high-risk customers.", | |
| action: "Review suspicious transaction.", | |
| affectedRules: [] | |
| } | |
| ]; | |
| // Function to generate Mermaid flowchart syntax using the Drools rules data | |
| function generateMermaidC4Syntax(rules) { | |
| let flowchart = `graph TD\n`; | |
| // Define the system container (Drools rule engine) | |
| flowchart += ` subgraph Drools_Rule_Engine [Drools Rule Engine]\n`; | |
| // Add rules as components within the rule engine | |
| rules.forEach((rule) => { | |
| const ruleId = rule.ruleName.replace(/\s+/g, "_"); | |
| flowchart += ` ${ruleId}["${rule.ruleName}: ${rule.description}"]\n`; | |
| }); | |
| flowchart += ` end\n`; | |
| // Define interactions (affected rules) | |
| rules.forEach((rule) => { | |
| const ruleId = rule.ruleName.replace(/\s+/g, "_"); | |
| rule.affectedRules.forEach((affectedRule) => { | |
| const affectedRuleId = affectedRule.replace(/\s+/g, "_"); | |
| flowchart += ` ${ruleId} -->|triggers| ${affectedRuleId}\n`; | |
| }); | |
| }); | |
| return flowchart; | |
| } | |
| // Generate the Mermaid syntax | |
| const mermaidSyntax = generateMermaidC4Syntax(rulesData); | |
| // Insert the Mermaid syntax into the HTML for rendering | |
| document.querySelector("#mermaid .mermaid").textContent = mermaidSyntax; | |
| // Wait for the Mermaid diagram to be rendered before adding hover effects | |
| window.onload = function () { | |
| const ruleTexts = document.querySelectorAll(".mermaid svg .node text"); | |
| ruleTexts.forEach((textNode) => { | |
| textNode.addEventListener("mouseenter", function () { | |
| const nodeId = textNode.closest(".node").id; | |
| const node = document.getElementById(nodeId); | |
| node.classList.add("highlighted"); | |
| const affectedLinks = document.querySelectorAll( | |
| `.mermaid svg .edgePath[path*='${nodeId}']` | |
| ); | |
| affectedLinks.forEach((link) => { | |
| link.classList.add("highlighted-link"); | |
| }); | |
| const affectedRules = | |
| rulesData.find((rule) => rule.ruleName.replace(/\s+/g, "_") === nodeId) | |
| ?.affectedRules || []; | |
| affectedRules.forEach((affectedRule) => { | |
| const affectedRuleId = affectedRule.replace(/\s+/g, "_"); | |
| const affectedNode = document.getElementById(affectedRuleId); | |
| if (affectedNode) { | |
| affectedNode.classList.add("highlighted"); | |
| } | |
| }); | |
| }); | |
| textNode.addEventListener("mouseleave", function () { | |
| const nodeId = textNode.closest(".node").id; | |
| const node = document.getElementById(nodeId); | |
| node.classList.remove("highlighted"); | |
| const affectedLinks = document.querySelectorAll( | |
| `.mermaid svg .edgePath[path*='${nodeId}']` | |
| ); | |
| affectedLinks.forEach((link) => { | |
| link.classList.remove("highlighted-link"); | |
| }); | |
| const affectedRules = | |
| rulesData.find((rule) => rule.ruleName.replace(/\s+/g, "_") === nodeId) | |
| ?.affectedRules || []; | |
| affectedRules.forEach((affectedRule) => { | |
| const affectedRuleId = affectedRule.replace(/\s+/g, "_"); | |
| const affectedNode = document.getElementById(affectedRuleId); | |
| if (affectedNode) { | |
| affectedNode.classList.remove("highlighted"); | |
| } | |
| }); | |
| }); | |
| }); | |
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* General styling for the body */ | |
| body { | |
| font-family: Arial, sans-serif; | |
| margin: 0; | |
| padding: 0; | |
| height: 100vh; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| background-color: #f4f4f9; | |
| } | |
| #mermaid { | |
| width: 80%; | |
| height: 80%; | |
| overflow: auto; | |
| background-color: white; | |
| border: 1px solid #ccc; | |
| border-radius: 8px; | |
| padding: 20px; | |
| } | |
| /* Styling for node elements in the Mermaid diagram */ | |
| .node rect { | |
| fill: #90caf9; | |
| stroke: #2196f3; | |
| stroke-width: 2px; | |
| } | |
| .node text { | |
| font-size: 14px; | |
| font-weight: bold; | |
| text-align: center; | |
| cursor: pointer; | |
| } | |
| /* Hover effect for highlighted elements */ | |
| .highlighted { | |
| fill: #ffeb3b !important; | |
| stroke: #ff5722 !important; | |
| } | |
| .highlighted-link { | |
| stroke: #ff5722 !important; | |
| stroke-width: 4px !important; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment