chore: Add tokenless auth to argos

We have added a check in e2e, to ensure events in forks will not trigger the visual tests.

This will not protect against malicious users, but there is no other way to support PRs from forks.

A proposal has been sent to Argos team to add a secure approach for public repos, fingers crossed.

.github/lychee.toml

@@ -47,7 +47,10 @@ exclude = [
 "https://(www.)?drupal.org",
 
 # Swimm returns 404, eventhough the link is valid
-"https://docs.swimm.io"
+"https://docs.swimm.io",
+
+# Timeout
+"https://huehive.co"
 ]
 
 # Exclude all private IPs from checking.

.github/workflows/e2e.yml

@@ -7,9 +7,6 @@ on:
       - master
       - release/**
   pull_request:
-  issue_comment:
-    types:
-      - created
   merge_group:
 
 concurrency: ${{ github.workflow }}-${{ github.ref }}
@@ -31,12 +28,10 @@ env:
       ) || 
       github.event.before
     }}
-  # Check if this is a new comment with '/visual-test'
   RUN_VISUAL_TEST: >-
-    ${{ github.event_name == 'issue_comment' && github.event.action == 'created' && contains(github.event.comment.body, '/visual-test') && github.event.issue.pull_request != null }}
+    ${{ github.repository == 'mermaid-js/mermaid' && (github.event_name != 'pull_request' || !startsWith(github.head_ref, 'renovate/')) }}
 jobs:
   cache:
-    if: ${{ github.event_name != 'issue_comment' || contains(github.event.comment.body, '/visual-test') }}
     runs-on: ubuntu-latest
     container:
       image: cypress/browsers:node-20.11.0-chrome-121.0.6167.85-1-ff-120.0-edge-121.0.2277.83-1
@@ -139,6 +134,9 @@ jobs:
           ARGOS_PARALLEL: ${{ env.RUN_VISUAL_TEST == 'true' }}
           ARGOS_PARALLEL_TOTAL: ${{ env.RUN_VISUAL_TEST == 'true' && strategy.job-total || 1 }}
           ARGOS_PARALLEL_INDEX: ${{ env.RUN_VISUAL_TEST == 'true' && matrix.containers || 1 }}
+          GITHUB_REPOSITORY: ${{ github.repository }}
+          GITHUB_JOB: ${{ github.job }}
+          GITHUB_RUN_ID: ${{ github.run_id }}
           CYPRESS_COMMIT: ${{ github.sha }}
           CYPRESS_RECORD_KEY: ${{ env.RUN_VISUAL_TEST == 'true' && secrets.CYPRESS_RECORD_KEY || ''}}
           SPLIT: ${{ strategy.job-total }}

README.md

@@ -257,6 +257,34 @@ pie
 
 ### Git graph [experimental - <a href="https://mermaid.live/edit#pako:eNqNkMFugzAMhl8F-VyVAR1tOW_aA-zKxSSGRCMJCk6lCvHuNZPKZdM0n-zf3_8r8QIqaIIGMqnB8kfEybQ--y4VnLP8-9RF9Mpkmm40hmlnDKmvkPiH_kfS7nFo_VN0FAf6XwocQGgxa_nGsm1bYEOOWmik1dRjGrmF1q-Cpkkj07u2HCI0PY4zHQATh8-7V9BwTPSE3iwOEd1OjQE1iWkBvk_bzQY7s0Sq4Hs7bHqKo8iGeZqbPN_WR7mpSd1RHpvPVhuMbG7XOq_L-oJlRfW5wteq0qorrpe-PBW9Pr8UJcK6rg-BLYPQ">live editor</a>]
 
+```
+gitGraph
+  commit
+  commit
+  branch develop
+  checkout develop
+  commit
+  commit
+  checkout main
+  merge develop
+  commit
+  commit
+```
+
+```mermaid
+gitGraph
+  commit
+  commit
+  branch develop
+  checkout develop
+  commit
+  commit
+  checkout main
+  merge develop
+  commit
+  commit
+```
+
 ### Bar chart (using gantt chart) [<a href="https://mermaid.js.org/syntax/gantt.html">docs</a> - <a href="https://mermaid.live/edit#pako:eNptkU1vhCAQhv8KIenNugiI4rkf6bmXpvEyFVxJFDYyNt1u9r8X63Z7WQ9m5pknLzieaBeMpQ3dg0dsPUkPOhwteXZIXmJcbCT3xMAxkuh8Z8kIEclyMIB209fqKcwTICFvG4IvFy_oLrZ-g9F26ILfQgvNFN94VaRXQ1iWqpumZBcu1J8p1E1TXDx59eQNr5LyEqjJn6hv5QnGNlxevZJmdLLpy5xJSzut45biYCfb0iaVxvawjNjS1p-TCguG16PvaIPzYjO67e3BwX6GiTY9jPFKH43DMF_hGMDY1J4oHg-_f8hFTJFd8L3br3yZx4QHxENsdrt1nO8dDstH3oVpF50ZYMbhU6ud4qoGLqyqBJRCmO6j0HXPZdGbihUc6Pmc0QP49xD-b5X69ZQv2gjO81IwzWqhC1lKrjJ6pA3nVS7SMiVjrKirWlYp5fs3osgrWeo00lorLWvOzz8JVbXm">live editor</a>]
 
 ```

cypress.config.ts

@@ -5,6 +5,14 @@ import { defineConfig } from 'cypress';
 import { addMatchImageSnapshotPlugin } from 'cypress-image-snapshot/plugin';
 import cypressSplit from 'cypress-split';
 
+const encodeArgosToken = (options: {
+  owner: string;
+  repository: string;
+  jobId: string;
+  runId: string;
+}) => `tokenless-github-${Buffer.from(JSON.stringify(options), 'utf8').toString('base64')}`;
+// cspell:ignore tokenless
+
 export default eyesPlugin(
   defineConfig({
     projectId: 'n2sma2',
@@ -26,8 +34,22 @@ export default eyesPlugin(
         config.env.useArgos = !!process.env.CI && !!process.env.ARGOS_TOKEN;
 
         if (config.env.useArgos) {
+          if (!process.env.GITHUB_REPOSITORY) {
+            throw new Error('GITHUB_REPOSITORY is not set');
+          }
+          if (!process.env.GITHUB_JOB) {
+            throw new Error('GITHUB_JOB is not set');
+          }
+          if (!process.env.GITHUB_RUN_ID) {
+            throw new Error('GITHUB_RUN_ID is not set');
+          }
           registerArgosTask(on, config, {
-            token: 'fc3a35cf5200db928d65b2047861582d9444032b',
+            token: encodeArgosToken({
+              owner: process.env.GITHUB_REPOSITORY.split('/')[0],
+              repository: process.env.GITHUB_REPOSITORY.split('/')[1],
+              jobId: process.env.GITHUB_JOB,
+              runId: process.env.GITHUB_RUN_ID,
+            }),
           });
         } else {
           addMatchImageSnapshotPlugin(on, config);

docs/ecosystem/tutorials.md

@@ -52,28 +52,33 @@ Examples are provided in [Getting Started](../intro/getting-started.md)
 
 [K8s.dev blog: Improve your documentation with Mermaid.js diagrams](https://www.kubernetes.dev/blog/2021/12/01/improve-your-documentation-with-mermaid.js-diagrams/)
 
-## Jupyter Integration with mermaid-js
+## Jupyter / Python Integration with mermaid-js
 
-Here's an example of Python integration with mermaid-js which uses the mermaid.ink service, that displays the graph in a Jupyter notebook.
+Here's an example of Python integration with mermaid-js which uses the mermaid.ink service, that displays the graph in a Jupyter notebook and save it as _.png_ image with the stated resolution (in this example, `dpi=1200`).
 
 ```python
 import base64
+import io, requests
 from IPython.display import Image, display
+from PIL import Image as im
 import matplotlib.pyplot as plt
 
 def mm(graph):
     graphbytes = graph.encode("utf8")
     base64_bytes = base64.urlsafe_b64encode(graphbytes)
     base64_string = base64_bytes.decode("ascii")
-    display(Image(url="https://mermaid.ink/img/" + base64_string))
+    img = im.open(io.BytesIO(requests.get('https://mermaid.ink/img/' + base64_string).content))
+    plt.imshow(img)
+    plt.axis('off') # allow to hide axis
+    plt.savefig('image.png', dpi=1200)
 
 mm("""
 graph LR;
-    A--> B & C & D;
-    B--> A & E;
-    C--> A & E;
-    D--> A & E;
-    E--> B & C & D;
+    A--> B & C & D
+    B--> A & E
+    C--> A & E
+    D--> A & E
+    E--> B & C & D
 """)
 ```
 
@@ -81,4 +86,4 @@ graph LR;
 
 ![Example graph of the Python integration](img/python-mermaid-integration.png)
 
-<!--- cspell:ignore Elle Jaoude Neurodiverse graphbytes --->
+<!--- cspell:ignore Elle Jaoude Neurodiverse graphbytes imshow savefig --->

packages/mermaid/src/diagrams/state/stateCommon.ts

@@ -3,7 +3,7 @@
  */
 
 // default diagram direction
-export const DEFAULT_DIAGRAM_DIRECTION = 'TB';
+export const DEFAULT_DIAGRAM_DIRECTION = 'LR';
 
 // default direction for any nested documents (composites)
 export const DEFAULT_NESTED_DOC_DIR = 'TB';

packages/mermaid/src/docs/ecosystem/tutorials.md

@@ -46,28 +46,33 @@ https://codepen.io/Ryuno-Ki/pen/LNxwgR
 
 [K8s.dev blog: Improve your documentation with Mermaid.js diagrams](https://www.kubernetes.dev/blog/2021/12/01/improve-your-documentation-with-mermaid.js-diagrams/)
 
-## Jupyter Integration with mermaid-js
+## Jupyter / Python Integration with mermaid-js
 
-Here's an example of Python integration with mermaid-js which uses the mermaid.ink service, that displays the graph in a Jupyter notebook.
+Here's an example of Python integration with mermaid-js which uses the mermaid.ink service, that displays the graph in a Jupyter notebook and save it as _.png_ image with the stated resolution (in this example, `dpi=1200`).
 
 ```python
 import base64
+import io, requests
 from IPython.display import Image, display
+from PIL import Image as im
 import matplotlib.pyplot as plt
 
 def mm(graph):
     graphbytes = graph.encode("utf8")
     base64_bytes = base64.urlsafe_b64encode(graphbytes)
     base64_string = base64_bytes.decode("ascii")
-    display(Image(url="https://mermaid.ink/img/" + base64_string))
+    img = im.open(io.BytesIO(requests.get('https://mermaid.ink/img/' + base64_string).content))
+    plt.imshow(img)
+    plt.axis('off') # allow to hide axis
+    plt.savefig('image.png', dpi=1200)
 
 mm("""
 graph LR;
-    A--> B & C & D;
-    B--> A & E;
-    C--> A & E;
-    D--> A & E;
-    E--> B & C & D;
+    A--> B & C & D
+    B--> A & E
+    C--> A & E
+    D--> A & E
+    E--> B & C & D
 """)
 ```
 
@@ -75,4 +80,4 @@ graph LR;
 
 ![Example graph of the Python integration](img/python-mermaid-integration.png)
 
-<!--- cspell:ignore Elle Jaoude Neurodiverse graphbytes --->
+<!--- cspell:ignore Elle Jaoude Neurodiverse graphbytes imshow savefig --->

tsconfig.json

@@ -103,5 +103,5 @@
     // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
     "skipLibCheck": true /* Skip type checking all .d.ts files. */
   },
-  "exclude": ["node_modules", "dist", "coverage"]
+  "exclude": ["**/node_modules/*", "**/dist/*", ".git", "coverage"]
 }