diff --git a/cypress/integration/rendering/sequenceDiagram-icon.spec.ts b/cypress/integration/rendering/sequenceDiagram-icon.spec.ts
new file mode 100644
index 000000000..7e628428d
--- /dev/null
+++ b/cypress/integration/rendering/sequenceDiagram-icon.spec.ts
@@ -0,0 +1,112 @@
+import { imgSnapshotTest } from '../../helpers/util';
+
+const looks = ['classic'] as const;
+
+looks.forEach((look) => {
+ describe(`SequenceDiagram icon participants in ${look} look`, () => {
+ it(`single participant with icon`, () => {
+ const diagram = `sequenceDiagram
+participant Bob@{ type: "icon", icon: "fa:bell" }
+Note over Bob: Icon participant`;
+ imgSnapshotTest(diagram, { look });
+ });
+
+ it(`two participants, one icon and one normal`, () => {
+ const diagram = `sequenceDiagram
+participant Bob@{ type: "icon", icon: "fa:bell" }
+participant Alice
+Bob->>Alice: Hello`;
+ imgSnapshotTest(diagram, { look });
+ });
+
+ it(`two icon participants`, () => {
+ const diagram = `sequenceDiagram
+participant Bob@{ type: "icon", icon: "fa:bell" }
+participant Alice@{ type: "icon", icon: "fa:user" }
+Bob->>Alice: Hello
+Alice-->>Bob: Hi`;
+ imgSnapshotTest(diagram, { look });
+ });
+
+ it(`with markdown htmlLabels:true content`, () => {
+ // html/markdown in messages/notes (participants themselves don't support label/form/w/h)
+ const diagram = `sequenceDiagram
+participant Bob@{ type: "icon", icon: "fa:bell" }
+participant Alice
+Bob->>Alice: This is **bold** and strong
+Note over Bob,Alice: Mixed HTML and **markdown**`;
+ imgSnapshotTest(diagram, { look });
+ });
+
+ it(`with markdown htmlLabels:false content`, () => {
+ const diagram = `sequenceDiagram
+participant Bob@{ type: "icon", icon: "fa:bell" }
+participant Alice
+Bob->>Alice: This is **bold** and strong`;
+ imgSnapshotTest(diagram, {
+ look,
+ htmlLabels: false,
+ flowchart: { htmlLabels: false },
+ });
+ });
+
+ it(`with styles applied to participant`, () => {
+ // style by participant id
+ const diagram = `
+ sequenceDiagram
+ participant Bob@{ type: "icon", icon: "fa:bell" }
+ participant Alice
+ Bob->>Alice: Styled participant
+`;
+ imgSnapshotTest(diagram, { look });
+ });
+
+ it(`with classDef and class application`, () => {
+ const diagram = `
+ sequenceDiagram
+ participant Bob@{ type: "icon", icon: "fa:bell" }
+ participant Alice
+ Bob->>Alice: Classed participant
+`;
+ imgSnapshotTest(diagram, { look });
+ });
+ });
+});
+
+// Colored emoji icon tests (analogous to the flowchart colored icon tests), no direction line.
+describe('SequenceDiagram colored icon participant', () => {
+ it('colored emoji icon without styles', () => {
+ const icon = 'fluent-emoji:tropical-fish';
+ const diagram = `
+ sequenceDiagram
+ participant Bob@{ type: "icon", icon: "${icon}" }
+ Note over Bob: colored emoji icon
+`;
+ imgSnapshotTest(diagram);
+ });
+
+ it('colored emoji icon with styles', () => {
+ const icon = 'fluent-emoji:tropical-fish';
+ const diagram = `
+ sequenceDiagram
+ participant Bob@{ type: "icon", icon: "${icon}" }
+`;
+ imgSnapshotTest(diagram);
+ });
+});
+
+// Mixed scenario: multiple interactions, still no direction line.
+describe('SequenceDiagram icon participant with multiple interactions', () => {
+ const icon = 'fa:bell-slash';
+ it('icon participant interacts with two normal participants', () => {
+ const diagram = `sequenceDiagram
+participant Bob@{ type: "icon", icon: "${icon}" }
+participant Alice
+participant Carol
+Bob->>Alice: Ping
+Alice-->>Bob: Pong
+Bob->>Carol: Notify
+Note right of Bob: Icon side note`;
+ imgSnapshotTest(diagram);
+ });
+});
diff --git a/cypress/integration/rendering/sequenceDiagram-image.spec.ts b/cypress/integration/rendering/sequenceDiagram-image.spec.ts
new file mode 100644
index 000000000..7e5e8c0d9
--- /dev/null
+++ b/cypress/integration/rendering/sequenceDiagram-image.spec.ts
@@ -0,0 +1,88 @@
+import { imgSnapshotTest } from '../../helpers/util';
+
+const looks = ['classic'] as const;
+
+looks.forEach((look) => {
+ describe(`SequenceDiagram image participants in ${look} look`, () => {
+ it(`single participant with image`, () => {
+ const diagram = `sequenceDiagram
+participant Bob@{ type: "image", "image": "https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg" }
+Note over Bob: Image participant`;
+ imgSnapshotTest(diagram, { look });
+ });
+
+ it(`two participants, one image and one normal`, () => {
+ const diagram = `sequenceDiagram
+participant Bob@{ type: "image", "image": "https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg" }
+participant Alice
+Bob->>Alice: Hello`;
+ imgSnapshotTest(diagram, { look });
+ });
+
+ it(`two image participants`, () => {
+ const diagram = `sequenceDiagram
+participant Bob@{ type: "image", "image": "https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg" }
+participant Alice@{ type: "image", "image": "https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg" }
+Bob->>Alice: Hello
+Alice-->>Bob: Hi`;
+ imgSnapshotTest(diagram, { look });
+ });
+
+ it(`with markdown htmlLabels:true content`, () => {
+ const diagram = `sequenceDiagram
+participant Bob@{ type: "image", "image": "https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg" }
+participant Alice
+Bob->>Alice: This is **bold** and strong
+Note over Bob,Alice: Mixed HTML and **markdown**`;
+ imgSnapshotTest(diagram, { look });
+ });
+
+ it(`with markdown htmlLabels:false content`, () => {
+ const diagram = `sequenceDiagram
+participant Bob@{ type: "image", "image": "https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg" }
+participant Alice
+Bob->>Alice: This is **bold** and strong`;
+ imgSnapshotTest(diagram, {
+ look,
+ htmlLabels: false,
+ flowchart: { htmlLabels: false },
+ });
+ });
+
+ it(`with styles applied to participant`, () => {
+ const diagram = `
+ sequenceDiagram
+ participant Bob@{ type: "image", "image": "https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg" }
+ participant Alice
+ Bob->>Alice: Styled participant
+`;
+ imgSnapshotTest(diagram, { look });
+ });
+
+ it(`with classDef and class application`, () => {
+ const diagram = `
+ sequenceDiagram
+ participant Bob@{ type: "image", "image": "https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg" }
+ participant Alice
+ Bob->>Alice: Classed participant
+`;
+ imgSnapshotTest(diagram, { look });
+ });
+ });
+});
+
+// Mixed scenario: multiple interactions, still no direction line.
+describe('SequenceDiagram image participant with multiple interactions', () => {
+ const imageUrl = 'https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg';
+ it('image participant interacts with two normal participants', () => {
+ const diagram = `sequenceDiagram
+participant Bob@{ type: "image", "image": "${imageUrl}" }
+participant Alice
+participant Carol
+Bob->>Alice: Ping
+Alice-->>Bob: Pong
+Bob->>Carol: Notify
+Note right of Bob: Image side note`;
+ imgSnapshotTest(diagram);
+ });
+});
diff --git a/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js b/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js
index 61738ae5e..c8a5a3190 100644
--- a/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js
+++ b/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js
@@ -2216,4 +2216,73 @@ Bob->>Alice:Got it!
expect(actors.get('E').description).toBe('E');
});
});
+
+ describe('image and icon participant parsing', () => {
+ it('should parse image participant with image URL', async () => {
+ const diagram = await Diagram.fromText(`
+ sequenceDiagram
+ participant Bob@{ "type": "image", "image": "https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg" }
+ Bob->>Bob: test
+ `);
+ const actors = diagram.db.getActors();
+ expect(actors.get('Bob').type).toBe('image');
+ expect(actors.get('Bob').doc.image).toBe(
+ 'https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg'
+ );
+ });
+
+ it('should parse icon participant with icon name', async () => {
+ const diagram = await Diagram.fromText(`
+ sequenceDiagram
+ participant Alice@{ "type": "icon", "icon": "fa:bell" }
+ Alice->>Alice: test
+ `);
+ const actors = diagram.db.getActors();
+ expect(actors.get('Alice').type).toBe('icon');
+ expect(actors.get('Alice').doc.icon).toBe('fa:bell');
+ });
+
+ it('should parse two image participants', async () => {
+ const diagram = await Diagram.fromText(`
+ sequenceDiagram
+ participant Bob@{ "type": "image", "image": "https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg" }
+ participant Alice@{ "type": "image", "image": "https://cdn.pixabay.com/photo/2016/11/29/09/32/animal-1867121_1280.jpg" }
+ Bob->>Alice: Hello
+ Alice-->>Bob: Hi
+ `);
+ const actors = diagram.db.getActors();
+ expect(actors.get('Bob').type).toBe('image');
+ expect(actors.get('Bob').doc.image).toBe(
+ 'https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg'
+ );
+ expect(actors.get('Alice').type).toBe('image');
+ expect(actors.get('Alice').doc.image).toBe(
+ 'https://cdn.pixabay.com/photo/2016/11/29/09/32/animal-1867121_1280.jpg'
+ );
+ });
+
+ it('should parse image participant with normal participant', async () => {
+ const diagram = await Diagram.fromText(`
+ sequenceDiagram
+ participant Bob@{ "type": "image", "image": "https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg" }
+ participant Alice
+ Bob->>Alice: Hello
+ `);
+ const actors = diagram.db.getActors();
+ expect(actors.get('Bob').type).toBe('image');
+ expect(actors.get('Alice').type).toBe('participant');
+ });
+
+ it('should parse icon participant with normal participant', async () => {
+ const diagram = await Diagram.fromText(`
+ sequenceDiagram
+ participant Bob@{ "type": "icon", "icon": "fa:bell" }
+ participant Alice
+ Bob->>Alice: Hello
+ `);
+ const actors = diagram.db.getActors();
+ expect(actors.get('Bob').type).toBe('icon');
+ expect(actors.get('Alice').type).toBe('participant');
+ });
+ });
});