Cloud Service not showing animation when using include * animation

[amoljoshi10]

@simonbrowndotje I was looking at example of structurizr dsl at https://structurizr.com/dsl?example=big-bank-plc
I have a question on usage of below lines where include * animation is written
And inside that you have added softwaresystem and person model names defined earlier i.e. internetBankingSystem,email,customer etc.

When I tried this on Structurizr DSL editor in Cloud service and when I checked C4 diagram , it is not showing any animation.

Please find attached screenshot of same where it is not showing any animation.

What exactly include * animation do?
As when I used Strcuturizr DSL in Cloud Service it is not showing any animation effect.

Can you please help me understand the usage of this include * animation and how it works ? Am I missing anything?

systemcontext internetBankingSystem "SystemContext" {
include *
animation {
internetBankingSystem
customer
mainframe
email
}
autoLayout
}

[simonbrowndotje]

The documentation for animation can be found at the following locations:

• Feature overview -> https://structurizr.com/help/animation
• DSL support -> https://github.com/structurizr/dsl/blob/master/docs/language-reference.md#animation

[amoljoshi10]

@simonbrowndotje thanks for your comments. I have gone through this but what I observed is that as shown here https://structurizr.com/help/animation the animation is not happening for below where I applied animation in internetBankingSystem,customer,mainframe and email.

The example I referred it from https://structurizr.com/dsl?example=big-bank-plc.
The same code snippet you will find in this example.

But animation effect I am not getting in diagram.

Can you please help me here.

systemcontext internetBankingSystem "SystemContext" {
include *
animation {
internetBankingSystem
customer
mainframe
email
}
autoLayout
}

[simonbrowndotje]

Please attach a screenshot of your web browser.

[amoljoshi10]

Sure @simonbrowndotje please find attached screenshot of my Google Chrome Browser in Presentation mode here

[simonbrowndotje]

If you're in presentation mode, you'll need to use the keyboard shortcuts (, and .) to step through the animation ... assuming that you can see the animation when you are not in presentation mode, of course.

[amoljoshi10]

@simonbrowndotje Yes I just tried both the scenarios i.e. when I am in Presentation mode and I am not in Presentation mode again and capture screenshots for your reference. So that it will be bit easy for me to explain. Please let me know is this fine? I can see the issue is when I am not in Presentation mode then also it doesn't show animation in cloud service initially and only shows after pressing . and , when I am not even in Presentation mode i.e. I am in Initial View of Cloud Service's Diagram Editor or Diagram Viewer or DSL Editor Mode
Please find screenshots below for each scenario in title I described scenario and respective screenshots .

Please let me know is this fine? As when I am not in Presentation mode and I am in Initial View of Cloud Service's Diagram Editor or Diagram Viewer or DSL Editor Mode then also I am not getting animation.

And also please see behavior also I captured in Presentation mode in screenshots I shared below. Where behavior is same as in case when I am not in Presentation mode - no difference

Please share your comments.

Not in Presentation Mode Scenarios and these screenshots are for when I am in Cloud Service's Diagram Editor Mode .
And I found same behavior when I am in Diagram Viewer or DSL Editor Mode .

Please find screenshot below for
Not in Presentation Mode -Initial View of Cloud Service's Diagram Editor or Diagram Viewer or DSL Editor Mode when it loads diagram -Here as you see below I don't see animation as shown in below screenshot

Then

Once I press Dot (.) in same mode i.e. Diagram Editor or Diagram Viewer or DSL Editor Mode I can see animation where I can see only InternetBankingSystem and rest all disappears as shown below

Then

Once I press Comma (,) in same mode i.e. Diagram Editor or Diagram Viewer or DSL Editor Mode I can see animation where I can see everything along with InternetBankingSystem as shown below.

Presentation Mode Scenarios

In Presentation Mode -Initial View- Not getting any animation

Then
I press Dot (.) In Presentation Mode -and I am getting any animation where I can see only InternetBankingSystem and rest all disappears as shown below

Then

I press Comma (,) In Presentation Mode -and I am getting any animation where I can see everything along with InternetBankingSystem as shown below.

[simonbrowndotje]

This is the correct behaviour - the animation is not automatic unless you press the "play" button. Keep pressing the . key to progress through the animation (. is step forwards; , is step backwards). See https://structurizr.com/help/keyboard-shortcuts for more.

[amoljoshi10]

Ok Got it !!! I thought it is during initial load. Thanks a lot @simonbrowndotje for your comments.

[amoljoshi10]

Really appreciate for your time @simonbrowndotje .And I find structurizr a great way to communicate architecture to different audiences.
I am learning a awesome tool to communicate my architecture with the Strcuturizr . I find this tool and Diagram as a Code 2.0 concept a way better as compared to other tools in market.

1. Can you please suggest any reference if I have want to draw my architecture using C4 Model using Structurizr of my existing .Net or .Net Core Web applications large distributed application. It will be really helpful.

2. And also one more question can you please help me to understand what is the difference between Diagram as a code and Diagram as a text.

Thanks in Advance