Better color detection + fix win32 path handling

docs/syntax/sequenceDiagram.md

@@ -94,6 +94,59 @@ sequenceDiagram
     J->>A: Great!
 ```
 
+### Grouping / Box
+
+The actor(s) can be grouped in vertical boxes. You can define a color (if not it will be transparent) and/or a descriptive label using the following notation:
+
+    box Aqua Group Description
+    ... actors ...
+    end
+    box Group whithout description
+    ... actors ...
+    end
+    box rgb(33,66,99)
+    ... actors ...
+    end
+
+> **Note**
+> If your group name is a color you can force the color to be transparent:
+
+    box transparent Aqua
+    ... actors ...
+    end
+
+```mermaid-example
+    sequenceDiagram
+    box Purple Alice & John
+    participant A
+    participant J
+    end
+    box Another Group
+    participant B
+    participant C
+    end
+    A->>J: Hello John, how are you?
+    J->>A: Great!
+    A->>B: Hello Bob, how is Charly ?
+    B->>C: Hello Charly, how are you?
+```
+
+```mermaid
+    sequenceDiagram
+    box Purple Alice & John
+    participant A
+    participant J
+    end
+    box Another Group
+    participant B
+    participant C
+    end
+    A->>J: Hello John, how are you?
+    J->>A: Great!
+    A->>B: Hello Bob, how is Charly ?
+    B->>C: Hello Charly, how are you?
+```
+
 ## Messages
 
 Messages can be of two displayed either solid or with a dotted line.

packages/mermaid/src/diagrams/sequence/sequenceDb.js

@@ -224,9 +224,7 @@ export const parseBoxData = function (str) {
   let title = match != null && match[2] ? match[2].trim() : undefined;
 
   // check that the string is a color
-  var s = new Option().style;
-  s.color = color;
-  if (s.color !== color) {
+  if (!CSS.supports('color', color)) {
     color = 'transparent';
     title = str.trim();
   }

packages/mermaid/src/docs.mts

@@ -74,7 +74,7 @@ const filesTransformed: Set<string> = new Set();
 
 const generateHeader = (file: string): string => {
   // path from file in docs/* to repo root, e.g ../ or ../../ */
-  const relativePath = relative(file, SOURCE_DOCS_DIR);
+  const relativePath = relative(file, SOURCE_DOCS_DIR).replaceAll('\\', '/');
   const filePathFromRoot = posix.join('/packages/mermaid', file);
   const sourcePathRelativeToGenerated = posix.join(relativePath, filePathFromRoot);
   return `
@@ -94,6 +94,7 @@ const generateHeader = (file: string): string => {
  */
 const changeToFinalDocDir = (file: string): string => {
   const newDir = file.replace(SOURCE_DOCS_DIR, FINAL_DOCS_DIR);
+  console.log('Replacing in ' + file + ' > ' + newDir);
   mkdirSync(dirname(newDir), { recursive: true });
   return newDir;
 };
@@ -171,7 +172,7 @@ const transformIncludeStatements = (file: string, text: string): string => {
   // resolve includes - src https://github.com/vuejs/vitepress/blob/428eec3750d6b5648a77ac52d88128df0554d4d1/src/node/markdownToVue.ts#L65-L76
   return text.replace(includesRE, (m, m1) => {
     try {
-      const includePath = join(dirname(file), m1);
+      const includePath = join(dirname(file), m1).replaceAll('\\', '/');
       const content = readSyncedUTF8file(includePath);
       includedFiles.add(changeToFinalDocDir(includePath));
       return content;

packages/mermaid/src/docs/syntax/sequenceDiagram.md

@@ -63,10 +63,10 @@ sequenceDiagram
 The actor(s) can be grouped in vertical boxes. You can define a color (if not it will be transparent) and/or a descriptive label using the following notation:
 
 ```
-box lightgreen Group Number 1
+box Aqua Group Description
 ... actors ...
 end
-box Another Group
+box Group whithout description
 ... actors ...
 end
 box rgb(33,66,99)
@@ -74,9 +74,19 @@ box rgb(33,66,99)
 end
 ```
 
+```note
+If your group name is a color you can force the color to be transparent:
+```
+
+```
+box transparent Aqua
+... actors ...
+end
+```
+
 ```mermaid-example
     sequenceDiagram
-    box lightgreen Alice & John
+    box Purple Alice & John
     participant A
     participant J
     end