CSS harmonization with YAKINDU Traceability (#1184)

* CSS harmonization with YAKINDU Traceability

* CSS inconsistency fixed.

plugins/org.yakindu.sct.doc.user/css/local.css

@@ -1,5 +0,0 @@
-@CHARSET "ISO-8859-1";
-
-body {
-	margin: 2%;
-}

plugins/org.yakindu.sct.doc.user/css/style.css

@@ -1,3 +1,3 @@
 @import url("../css/bootstrap.css");
-@import url("../css/local.css");
+@import url("../css/yakindu.css");
 @import url("../css/ysct.css");

plugins/org.yakindu.sct.doc.user/css/yakindu.css

@@ -0,0 +1,233 @@
+/*
+ * This file contains common CSS styling for documentation artifacts of all YAKINDU projects. It reverts some changes
+ * introduced by the bootstrap framework.
+ *
+ * Any project-specific changes should not be done here, but rather in the <projectname>.css file.
+ */
+
+/*
+ * The font size in a blockquote should be the same as specified by the parent element:
+ */
+blockquote {
+    font-size: inherit;
+}
+
+/*
+ * Establish a margin around the body:
+ */
+body {
+    margin: 4%;
+}
+
+/*
+ * Revert bootstrap's fancy "code" rendering:
+ */
+code {
+    padding: 0;
+    color: #111111;
+    background-color: transparent;
+    font-size: 100%;
+    border-radius: 0;
+}
+
+/*
+ * On small screens, allow "unbreakable" words in "code" elements to be broken:
+ */
+@media ( max-width : 767px) {
+    code {
+        word-wrap: break-word;
+    }
+}
+
+/*
+ * Add some vertical space above and below images and tables to separate them from the text:
+ */
+img, table {
+    margin-top: 1em;
+    margin-bottom: 2em;
+}
+
+/*
+ * Images should look uniquely. The default settings are as follows:
+ * - According to the Golden Cut, the image width is between 38.2 and 61.8 percent. However, this is not suited for all
+ *   images. There are CSS classes to e.g. render an image at full width or at a small fraction of the view port size.
+ * - Images are centered.
+ * - Images have a shadow with a certain corner radius.
+ */
+img {
+    height: auto;
+    text-align: center;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    box-shadow: 5px 5px 20px #888888;
+    -webkit-box-shadow: 5px 5px 20px #888888;
+    -moz-box-shadow: 5px 5px 20px #888888;
+    border-radius: 4px;
+}
+
+/*
+ * Use the CSS class "inlinemediaobject" to include small images like symbols or buttons within a paragraph of text
+ * similar to a character. The image is scaled to have the height of the line.
+ */
+img.inlinemediaobject {
+    line-height: 1;
+    vertical-align: baseline;
+    min-width: inherit;
+    max-width: inherit;
+    width: inherit;
+    height: 1em;
+    text-align: inherit;
+    display: inline;
+    margin-left: 0px;
+    margin-right: 0px;
+    margin-top: 0px;
+    margin-bottom: 0px;
+    box-shadow: none;
+    border-radius: 0px;
+}
+
+/*
+ * CSS class "shadowless" for images that should not have a shadow.
+ */
+img.shadowless {
+    box-shadow: none;
+    margin-bottom: 0px;
+}
+
+/*
+ * Responsive design: image widths for normal and wide viewports:
+ */
+@media ( min-width : 30em) {
+    img {
+        max-width: 61.8%;
+        min-width: 38.2%;
+    }
+    img.small {
+        width: 38.2%;
+        max-width: 38.2%;
+    }
+    img.normal {
+        width: 61.8%;
+        min-width: 38.2%;
+    }
+    img.large {
+        width: 76.4%;
+        max-width: 76.4%;
+    }
+    img.full {
+        width: 100%;
+        max-width: 100%;
+    }
+}
+
+/*
+ * Responsive design: image widths for small viewports:
+ */
+@media ( max-width : 30em) {
+    img {
+        width: 100%;
+        max-width: 100%;
+    }
+    img.small {
+        width: 76.4%;
+        max-width: 76.4%;
+    }
+    img.normal img.large img.full {
+        max-width: 100%;
+        min-width: 100%;
+    }
+}
+
+/*
+ * Tables:
+ */
+table, th, td {
+    border: 0px solid black;
+}
+
+table {
+    border-collapse: collapse;
+    max-width: 100%;
+}
+
+th {
+    color: #ffffff;
+    background-color: #575757;
+}
+
+th, td {
+    padding-top: 0.2em;
+    padding-bottom: 0.2em;
+    padding-left: 0.5em;
+    padding-right: 0.5em;
+    text-align: left;
+    vertical-align: top;
+}
+
+tr:nth-child(even) {
+    background-color: #cfe3fc;
+}
+
+/*
+ * Chapter numbering:
+ */
+body {
+    counter-reset: h1
+}
+
+h1 {
+    counter-reset: h2
+}
+
+h2 {
+    counter-reset: h3
+}
+
+h3 {
+    counter-reset: h4
+}
+
+h4 {
+    counter-reset: h5
+}
+
+h5 {
+    counter-reset: h6
+}
+
+.body-container h1:before {
+    counter-increment: h1;
+    content: counter(h1) ". "
+}
+
+.body-container h2:before {
+    counter-increment: h2;
+    content: counter(h1) "." counter(h2) ". "
+}
+
+.body-container h3:before {
+    counter-increment: h3;
+    content: counter(h1) "." counter(h2) "." counter(h3) ". "
+}
+
+.body-container h4:before {
+    counter-increment: h4;
+    content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". "
+}
+
+.body-container h5:before {
+    counter-increment: h5;
+    content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "
+}
+
+.body-container h6:before {
+    counter-increment: h6;
+    content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "
+}
+
+h1.nocount:before h2.nocount:before, h3.nocount:before, h4.nocount:before, h5.nocount:before, h6.nocount:before {
+    content: "";
+    counter-increment: none
+}
+

plugins/org.yakindu.sct.doc.user/css/ysct.css

@@ -1,204 +1,93 @@
-/* Blockquote: */
-blockquote {
-	font-size: inherit;
-}
-
-/* Images */
-img.standard-image {
-	max-width: 61.8%;
-	min-width: 38.2%;
-	height: auto;
-	text-align: center;
-	display: block;
-	margin-left: auto;
-	margin-right: auto;
-	box-shadow: 10px 10px 20px #888888;
-	-webkit-box-shadow: 10px 10px 20px #888888;
-	-moz-box-shadow: 10px 10px 20px #888888;
-	border-radius: 4px;
-	margin-top: 1.5ex;
-	margin-bottom: 2.5ex;
-}
-
-img.small {
-	width: 38.2%;
-}
-
-img.full {
-	width: 100%;
-	max-width: 100%;
-}
-
-img.shadowless {
-	box-shadow: none;
-	margin-bottom: 0px;
-}
-
-img.inlinemediaobject {
-	line-height: 1;
-	vertical-align: middle;
-}
-
 /* Tables */
 /* The class "scedit" is used in tables describing working with the statechart editor.
    These tables typically consist of two columns with a textual description in the
    left column and a screenshot on the right. */
 table.scedit {
-	width: 90%;
-	border-collapse: collapse;
+    width: 90%;
+    border-collapse: collapse;
 }
 
 tr.scedit {
-	vertical-align: top
+    vertical-align: top
 }
 
 table.scedit td {
-	border-radius: 0%;
-	border-style: solid;
-	border-width: 0px;
-	padding-bottom: 1ex;
-	vertical-align: top;
+    border-radius: 0%;
+    border-style: solid;
+    border-width: 0px;
+    padding-bottom: 1ex;
+    vertical-align: top;
 }
 
 table.scedit td:nth-child(1) {
-	width: 75%;
-	padding-right: 5%;
+    width: 75%;
+    padding-right: 5%;
 }
 
 table.scedit td:nth-child(2) {
-	width: 25%;
+    width: 25%;
 }
 
 table.scedit img {
-	max-width: 100%;
-	margin-top: 0px;
-	margin-left: 0px;
-	margin-right: auto;
-	margin-bottom: auto;
-	box-shadow: 4px 4px 2px #bbb;
-}
-
-/* Counter */
-body {
-	counter-reset: h1
-}
-
-h1 {
-	counter-reset: h2
-}
-
-h2 {
-	counter-reset: h3
-}
-
-h3 {
-	counter-reset: h4
-}
-
-h4 {
-	counter-reset: h5
-}
-
-h5 {
-	counter-reset: h6
-}
-
-.body-container h1:before {
-	counter-increment: h1;
-	content: counter(h1) ". "
-}
-
-.body-container h2:before {
-	counter-increment: h2;
-	content: counter(h1) "." counter(h2) ". "
-}
-
-.body-container h3:before {
-	counter-increment: h3;
-	content: counter(h1) "." counter(h2) "." counter(h3) ". "
-}
-
-.body-container h4:before {
-	counter-increment: h4;
-	content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4)
-		". "
-}
-
-.body-container h5:before {
-	counter-increment: h5;
-	content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "."
-		counter(h5) ". "
-}
-
-.body-container h6:before {
-	counter-increment: h6;
-	content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "."
-		counter(h5) "." counter(h6) ". "
-}
-
-h1.nocount:before h2.nocount:before, h3.nocount:before, h4.nocount:before,
-	h5.nocount:before, h6.nocount:before {
-	content: "";
-	counter-increment: none
-}
-
-@media ( max-width : 767px) {
-	code {
-		word-wrap: break-word;
-	}
+    max-width: 100%;
+    margin-top: 0px;
+    margin-left: 0px;
+    margin-right: auto;
+    margin-bottom: auto;
+    box-shadow: 4px 4px 2px #bbb;
 }
 
 .pro-feature {
-	border: 2px solid red;
-	border-color: rgba(255, 0, 0, 0.75);
-	border-width: 2px 0 0 2px;
-	position: relative;
-	overflow: hidden;
-	padding: 10px 20px 0;
-	margin-right: -20px;
-	margin-bottom: 30px;
+    border: 2px solid red;
+    border-color: rgba(255, 0, 0, 0.75);
+    border-width: 2px 0 0 2px;
+    position: relative;
+    overflow: hidden;
+    padding: 10px 20px 0;
+    margin-right: -20px;
+    margin-bottom: 30px;
 }
 
 .pro-feature:before {
-	content: "PRO";
-	position: absolute;
-	top: -10px;
-	right: -34px;
-	background: red;
-	background: rgba(255, 0, 0, 0.75);
-	color: white;
-	padding: 20px 30px 2px;
-	transform: rotate(45deg);
-	z-index: 10
+    content: "PRO";
+    position: absolute;
+    top: -10px;
+    right: -34px;
+    background: red;
+    background: rgba(255, 0, 0, 0.75);
+    color: white;
+    padding: 20px 30px 2px;
+    transform: rotate(45deg);
+    z-index: 10
 }
 
 span.pro-feature {
-	padding: 0;
-	border-width: 0
+    padding: 0;
+    border-width: 0
 }
 
 span.pro-feature:before {
-	transform: none;
-	padding: 0 3px;
-	position: relative;
-	top: 0;
-	left: 0
+    transform: none;
+    padding: 0 3px;
+    position: relative;
+    top: 0;
+    left: 0
 }
 
 /* Edit on GitHub: */
 .sct-docs h1 {
-	/* Make some room for the "Edit on GitHub link": */
-	margin-right: 10rem;
-	clear: left;
+    /* Make some room for the "Edit on GitHub link": */
+    margin-right: 10rem;
+    clear: left;
 }
 
 .sct-docs .edit-on-github {
-	float: right;
-	line-height: 45px;
-	position: relative;
-	margin: 0;
+    float: right;
+    line-height: 45px;
+    position: relative;
+    margin: 0;
 }
 
 .eclipsehelp .edit-on-github {
-	display: none
+    display: none
 }

plugins/org.yakindu.sct.doc.user/src/user-guide/advanced_simulation.textile

@@ -20,7 +20,7 @@ Throughout this chapter we will be using the _light switch_ statechart as an exa
 If you press the _pressLightOn_ button, the lamp turns on at its lowest brightness value. If you operate _pressLightOn_ repeatedly, each time the lamp becomes brighter until it reaches its maximum brightness. Pressing the _pressLightOff_ button, immediately turns off the light completely. The brightness can only be raised as long as it hasn't yet reached its maximum value of five. After that, the guard condition disallows to raise it any further.
 
 p(#advsim_fig-the-light-switch-sample-statechart). 
-!(standard-image)images/advsim_010_lightswitch_010_statechart.png(The light switch sample statechart)!
+!images/advsim_010_lightswitch_010_statechart.png(The light switch sample statechart)!
 
 p=. The light switch sample statechart
 
@@ -37,7 +37,7 @@ To make use of breakpoints, the statechart simulation needs to be executed in de
 # The statechart simulation starts in the debugging mode.
 
 p(#advsim_fig-starting-a-simulation-in-debugging-mode). 
-!(standard-image)images/advsim_020_start_debugging_010_debug_as_menu.png(Starting a simulation in debugging mode)!
+!images/advsim_020_start_debugging_010_debug_as_menu.png(Starting a simulation in debugging mode)!
 
 p=. Starting a simulation in debugging mode
 
@@ -47,14 +47,14 @@ h3(#advsim_setting-a-breakpoint). Setting a breakpoint
 # Select _Toggle Breakpoint_ from the context menu, see "Figure "Setting a breakpoint"":#advsim_fig-setting-a-breakpoint.
 
 p(#advsim_fig-setting-a-breakpoint). 
-!(standard-image)images/advsim_030_breakpoint_010_setting_on_transition.png(Setting a breakpoint)!
+!images/advsim_030_breakpoint_010_setting_on_transition.png(Setting a breakpoint)!
 
 p=. Setting a breakpoint
 
 States and transitions having a breakpoint attached are labeled with a !(inlinemediaobject)images/advsim_symbol_breakpoint_enabled.png(Symbol: Breakpoint enabled)! symbol. "Figure "Breakpoints on transition and state"":#advsim_fig-breakpoints-on-transition-and-state shows an example.
 
 p(#advsim_fig-breakpoints-on-transition-and-state). 
-!(standard-image)images/advsim_030_breakpoint_020_transition_and_state_with_breakpoints.png(Breakpoints on transition and state)!
+!images/advsim_030_breakpoint_020_transition_and_state_with_breakpoints.png(Breakpoints on transition and state)!
 
 p=. Breakpoints on transition and state
 
@@ -62,13 +62,13 @@ h3(#advsim_hitting-a-breakpoint). Hitting a breakpoint
 
 If the simulation runs into a state with a breakpoint, the state's entry actions, if any, are executed. After that, execution of the state machine is suspended. The state is highlighted by a small green border.
 
-!(standard-image)images/advsim_030_breakpoint_030_suspending_at_state.png(Highlighting a suspended state)!
+!images/advsim_030_breakpoint_030_suspending_at_state.png(Highlighting a suspended state)!
 
 p=. Highlighting a suspended state
 
 If the simulation runs into a transition with a breakpoint, execution of the state machine is suspended. The transition is highlighted by drawing the transition arrow in green. The transition's actions, if any, are executed when the state machine is resumed.
 
-!(standard-image)images/advsim_030_breakpoint_040_suspending_at_transition.png(Highlighting a suspended transition)!
+!images/advsim_030_breakpoint_040_suspending_at_transition.png(Highlighting a suspended transition)!
 
 p=. Highlighting a suspended transition
 
@@ -87,7 +87,7 @@ The _breakpoints_ view shows a list of all breakpoints. The respective breakpoin
 You can use the _breakpoints_ view for disabling, enabling, and removing breakpoints as well as defining "conditional breakpoints":#advsim_conditional-breakpoints.
 
 p(#advsim_fig-breakpoints-view). 
-!(standard-image)images/advsim_030_breakpoint_050_enabled_and_disabled_breakpoints.png(The "Breakpoints" view)!
+!images/advsim_030_breakpoint_050_enabled_and_disabled_breakpoints.png(The "Breakpoints" view)!
 
 p=. The _Breakpoints_ view
 
@@ -137,7 +137,7 @@ However, while the simulation is suspended, you can raise multiple events, witho
 Consider for example, you want to press the "light on" and "light off" buttons at the same time and observe what happens. "Figure "Raising multiple events simultaneously"":#advsim_fig-raising-multiple-events-simultaneously-1 is showing the scenario:
 
 p(#advsim_fig-raising-multiple-events-simultaneously-1). 
-!(standard-image)images/advsim_040_multiple_events_010_events_not_raised.png(Raising multiple events simultaneously [1])!
+!images/advsim_040_multiple_events_010_events_not_raised.png(Raising multiple events simultaneously [1])!
 
 p=. Raising multiple events simultaneously [1]
 
@@ -145,7 +145,7 @@ p=. Raising multiple events simultaneously [1]
 * The _simulation_ view shows the _LightOn_ and the _LightOff_ events. Both events are labeled with a !(inlinemediaobject)images/advsim_symbol_event.png(Symbol: Event [not raised])! symbol, meaning the respective event is not raised.
 
 p(#advsim_fig-raising-multiple-events-simultaneously-2). 
-!(standard-image)images/advsim_040_multiple_events_020_events_raised.png(Raising multiple events simultaneously [2])!
+!images/advsim_040_multiple_events_020_events_raised.png(Raising multiple events simultaneously [2])!
 
 p=. Raising multiple events simultaneously [2]
 
@@ -162,7 +162,7 @@ It is important to understand that there is not queue of events. That is, in cas
 The first transition whose condition is fulfilled will be executed. All remaining events are quashed.
 
 p(#advsim_fig-transition-priorities). 
-!(standard-image)images/advsim_040_multiple_events_030_transition-priorities.png(Transition priorities)!
+!images/advsim_040_multiple_events_030_transition-priorities.png(Transition priorities)!
 
 p=. Transition priorities
 
@@ -181,7 +181,7 @@ To create a snapshot of the current statechart simulation, proceed as follows:
 # The snapshot is taken and appears in the snapshot list. It is labeled as "Snapshot" and tagged with the current timestamp. See "figure "A freshly taken snapshot"":#advsim_fig-a-freshly-taken-snapshot.
 
 p(#advsim_fig-a-freshly-taken-snapshot). 
-!(standard-image)images/advsim_050_snapshots_010_a-freshly-taken-snapshot.png(A freshly taken snapshot)!
+!images/advsim_050_snapshots_010_a-freshly-taken-snapshot.png(A freshly taken snapshot)!
 
 p=. A freshly taken snapshot
 
@@ -195,7 +195,7 @@ The _snapshots_ view consists of two parts.
 ** !(inlinemediaobject)images/advsim_button_snapshot_image_overview.png(Button: Show image overview)!: shows an image of the state machine with highlighted active elements
 
 p(#advsim_fig-inspecting-the-variables-of-a-snapshots). 
-!(standard-image)images/advsim_050_snapshots_025_details_view.png(Inspecting snapshot details: variables overview [left], image overview [right])!
+!images/advsim_050_snapshots_025_details_view.png(Inspecting snapshot details: variables overview [left], image overview [right])!
 
 p=. Inspecting snapshot details: variables overview [left], image overview [right]
 

plugins/org.yakindu.sct.doc.user/src/user-guide/c-domain.textile

@@ -24,14 +24,14 @@ p. The subsequent sections will explain how to use the C integration in practice
 h2(#cdom_creating-a-new-c-project). Creating a new C project
 
 # In the Eclipse main menu, select _File → New → Project…_. The _New Project_ wizard opens.
-# Select _C/C++ → C Project_.<br/>!(standard-image)images/cdom_geometry_010_new_c_project_010.png(Creating a new C project)!
+# Select _C/C++ → C Project_.<br/>!images/cdom_geometry_010_new_c_project_010.png(Creating a new C project)!
 # Click _Next >_. The _C Project_ dialog appears.
 # Enter the name of your project into the _Project name_ field. For the sake of this example, we call the project *Geometry*.
 # Specify the location of the project folder by either using the default location or by explicitly specifying a directory in the _Location_ field.
 # Select the _Project type_. In order to keep things plain and simple, for this example we create an _Empty Project_.
-# Select the toolchain you want to work with. It contains the necessary tools for C development. By default only the toolchains supporting your local platform are displayed. Since this example has been created on a Linux machine, the toolchain *Linux GCC* is shown.<br/>!(standard-image)images/cdom_geometry_010_new_c_project_020.png(Specifying the C project's properties)!
+# Select the toolchain you want to work with. It contains the necessary tools for C development. By default only the toolchains supporting your local platform are displayed. Since this example has been created on a Linux machine, the toolchain *Linux GCC* is shown.<br/>!images/cdom_geometry_010_new_c_project_020.png(Specifying the C project's properties)!
 # Click _Next >_.
-# Specify platforms, configurations, and project settings. This is more specific to C than to YAKINDU Statechart Tools, so we won't go into any details here.<br/>!(standard-image)images/cdom_geometry_010_new_c_project_030.png(Specifying platforms, configurations, and project settings)!
+# Specify platforms, configurations, and project settings. This is more specific to C than to YAKINDU Statechart Tools, so we won't go into any details here.<br/>!images/cdom_geometry_010_new_c_project_030.png(Specifying platforms, configurations, and project settings)!
 # Click _Finish_.
 # Eclipse asks whether it should associate this kind of project with the C/C++ perspective. Usually this is what you want, so set a checkmark at _Remember my decision_ and click _Yes_.
 # Eclipse creates the C project, here *Geometry*.
@@ -41,8 +41,8 @@ h2(#cdom_creating-a-c-header-file). Creating a C header file
 Now we can create a C header file specifying our own C type definitions which we can use in a state machine later. In order to create the file, let's proceed as follows:
 
 # In the project explorer view, right-click on the project. The context menu opens.
-# In the context menu, select _New → Header File_.<br/>!(standard-image)images/cdom_geometry_020_new_header_file_010.png(Creating a C header file)!
-# The dialog _New Header File_ is shown. Specify the name of the header file. Here we choose *point.h*.<br/>!(standard-image)images/cdom_geometry_020_new_header_file_020.png(Selecting a header file name)!
+# In the context menu, select _New → Header File_.<br/>!images/cdom_geometry_020_new_header_file_010.png(Creating a C header file)!
+# The dialog _New Header File_ is shown. Specify the name of the header file. Here we choose *point.h*.<br/>!images/cdom_geometry_020_new_header_file_020.png(Selecting a header file name)!
 # Click _Finish_. 
 # The header file *point.h* is created.<br/>
 
@@ -82,7 +82,7 @@ Let's create a statechart model now to make use of the C type _Point_ we have ju
 # Select _New → C Statechart Model …_. The _New YAKINDU Statechart_ wizard is shown.
 # In the dialog, specify the directory and the filename for the new statechart model file. The filename should end with @.sct@.
 # Click _Finish_. If Eclipse asks you whether to switch to the _YAKINDU Modeling_ perspective, please confirm.
-# The new statechart model is created:<br/>!(standard-image)images/cdom_geometry_030_new_statechart_model_030.png(New statechart model)!
+# The new statechart model is created:<br/>!images/cdom_geometry_030_new_statechart_model_030.png(New statechart model)!
 
 h3(#cdom_defining-a-c-type-variable-in-a-statechart). Defining a C-type variable in a statechart
 
@@ -100,13 +100,13 @@ On the right-hand side of the colon in the variable declaration, the variable's
 * the self-defined _Point_ type,
 * the qualifier _pointer_.
 
-!(standard-image)images/cdom_geometry_040_c_types_010.png(Using content assist to display available types)!
+!images/cdom_geometry_040_c_types_010.png(Using content assist to display available types)!
 
 p=. Using content assist to display available types
 
 Selecting the _Point_ menu entry completes the variable definition:
 
-!(standard-image)images/cdom_geometry_040_c_types_020.png(A "Point" variable)!
+!images/cdom_geometry_040_c_types_020.png(A "Point" variable)!
 
 p=. A _Point_ variable
 
@@ -123,7 +123,7 @@ bc. interface:
 
 The statechart below uses these variables in various places, i.&#8239;e. in transition actions, in internal actions, and in guard conditions.
 
-!(standard-image)images/cdom_geometry_050_using_c_type_variables_010.png(Using C-type variables)!
+!images/cdom_geometry_050_using_c_type_variables_010.png(Using C-type variables)!
 
 p=. Using C-type variables
 
@@ -148,7 +148,7 @@ Instead of using the fully-qualified type name – as in _point.Point_ – it is
 
 At the beginning of the definition section, enter @import:@ and hit @[Ctrl+Space]@. The content assist shows all namespaces you can import, besides other syntactical elements that would be valid here. In our example there's a single namespace _point_ that can be imported. The content assist explains that it comes from _/Geometry/point.h_, i.&#8239;e. from the file _point.h_ in the _Geometry_ project.
 
-!(standard-image)images/cdom_geometry_060_importing_namespace_010.png(Selecting a namespace to import)!
+!images/cdom_geometry_060_importing_namespace_010.png(Selecting a namespace to import)!
 
 p=. Selecting a namespace to import
 
@@ -247,7 +247,7 @@ interface:
 
 p. With this definition we can use expressions like @t.a.x@, see the image below. Regardless of where you are currently editing an expression, you can always use the code assist to explore which fields are available at that very point and of which types these fields are. Example:
 
-!(standard-image)images/cdom_geometry_170_data_structure_traversal_010.png(Content assist in data structure traversal)!
+!images/cdom_geometry_170_data_structure_traversal_010.png(Content assist in data structure traversal)!
 
 p=. Content assist in data structure traversal
 
@@ -388,7 +388,7 @@ The state machine below exemplifies this. Initially it defines two rectangles _a
 
 When one of the states *A is larger* or *A is smaller* is active, the rectangles' properties can be changed. Triggering the _compare_size_ event transitions to the *Check* state which repeats the area size comparison as described above.
 
-!(standard-image)images/cdom_geometry_080_simulation_010_statechart.png(The rectangle comparison statechart)!
+!images/cdom_geometry_080_simulation_010_statechart.png(The rectangle comparison statechart)!
 
 p=. The rectangle comparison statechart
 
@@ -425,7 +425,7 @@ The statechart simulation
 
 h3(#cdom_inspecting-c-data-structures). Inspecting C data structures
 
-!(standard-image)images/cdom_geometry_080_simulation_020_inspecting.png(Inspecting C data structures)!
+!images/cdom_geometry_080_simulation_020_inspecting.png(Inspecting C data structures)!
 
 p=. Inspecting C data structures
 
@@ -450,13 +450,13 @@ Change a variable's or field's value as follows:
 
 p(#cdom_fig_modifying_c_data_values). 
 
-!(standard-image)images/cdom_geometry_080_simulation_030_modifying.png(Modifying C data values)!
+!images/cdom_geometry_080_simulation_030_modifying.png(Modifying C data values)!
 
 p=. Modifying C data values
 
 In the example, click _compare_size_ to trigger the event. The state machine transitions to the *Check* state, recalculates the areas, and behaves as explained above.
 
-!(standard-image)images/cdom_geometry_080_simulation_040_rechecked.png(Rectangle areas modified and rechecked)!
+!images/cdom_geometry_080_simulation_040_rechecked.png(Rectangle areas modified and rechecked)!
 
 p=. Rectangle areas modified and rechecked
 
@@ -465,7 +465,7 @@ h2(#cdom_looking-up-a-type-definition). Looking up a type definition
 
 Given a variable definition in a statechart's definition section, you can lookup the corresponding type definition. The definition section must be in editing mode, i.&#8239;e. you must have double-clicked into it. Now press the @[Ctrl]@ key and move the mouse pointer over the type name. The former changes its shape into a hand symbol and the latter changes into a hyperlink:
 
-!(standard-image)images/cdom_geometry_160_type_lookup_010.png(Looking up a C type)!
+!images/cdom_geometry_160_type_lookup_010.png(Looking up a C type)!
 
 p=. Looking up a C type
 
@@ -517,7 +517,7 @@ p. Please note that in contrast to structured types, enumeration variables can b
 
 In order to see which values are available the content assist, triggered by @[Ctrl+Space]@, is helpful again.
 
-!(standard-image)images/cdom_geometry_083_enum_010_content_assist.png(Using content assist to select an enumeration value)!
+!images/cdom_geometry_083_enum_010_content_assist.png(Using content assist to select an enumeration value)!
 
 p=. Using content assist to select an enumeration value
 
@@ -527,7 +527,7 @@ bc.  t.fillColor = c;
 
 Accordingly, during simulation the values of enum variables are displayed in the simulation view. It is also possible to modify them manually.
 
-!(standard-image)images/cdom_geometry_083_enum_020_simulation.png(Using content assist to select an enumeration value)!
+!images/cdom_geometry_083_enum_020_simulation.png(Using content assist to select an enumeration value)!
 
 p=. Using content assist to select an enumeration value
 
@@ -547,13 +547,13 @@ YAKINDU Statechart Tools parses function declarations in header files and makes
 
 For now, once the statechart knows about the _area_ function's declaration in the C header file, the function can be used immediately in statechart language operations. Any @operation@ declaration in the statechart's definition section is not needed. Example:
 
-!(standard-image)images/cdom_geometry_090_operations_010_content_assist.png(Using content assist to enter a C function call)!
+!images/cdom_geometry_090_operations_010_content_assist.png(Using content assist to enter a C function call)!
 
 p=. Using content assist to enter a C function call
 
 Here's the complete example with the area calculations done by the _area_ function:
 
-!(standard-image)images/cdom_geometry_090_operations_020_calling_area.png(Example calling the "area" function)!
+!images/cdom_geometry_090_operations_020_calling_area.png(Example calling the "area" function)!
 
 p=. Example calling the "area" function
 

plugins/org.yakindu.sct.doc.user/src/user-guide/editing_statecharts.textile

@@ -76,7 +76,7 @@ The editor palette provides you with a set of various actions and statechart edi
 
 You can hide the palette by clicking on the small triangle in the palette's title bar. Click on the triangle again to make the palette reappear.
 
-!(standard-image)images/docu_editor-palette_010_overview.png(Editor palette)!
+!images/docu_editor-palette_010_overview.png(Editor palette)!
 
 p=. Editor palette
 
@@ -177,7 +177,7 @@ h2(#using-subdiagrams). Using subdiagrams
 
 When using composite states, a statechart model may easily become too big to give a comprehensive overview of the whole diagram. Subdiagrams come as a solution.
 
-!(standard-image)images/docu_subdiagram_010_inline.png(Composite state)!
+!images/docu_subdiagram_010_inline.png(Composite state)!
 
 p=. Composite state
 
@@ -185,13 +185,13 @@ When the _Extract Subdiagram_ "refactoring":#refactorings is executed on a compo
 
 Extracting a subdiagram creates entry and exit nodes in the subdiagram as needed.
 
-!(standard-image)images/docu_subdiagram_020_preview.png(Subdiagram popup window)!
+!images/docu_subdiagram_020_preview.png(Subdiagram popup window)!
 
 p=. Subdiagram popup window
 
 A click on the decorator opens the subdiagram in a separate editor tab. The breadcrumb at the top allows easy navigation throughout the hierachy levels.
 
-!(standard-image)images/docu_subdiagram_030_subdiagram-editor.png(Subdiagram editor)!
+!images/docu_subdiagram_030_subdiagram-editor.png(Subdiagram editor)!
 
 p=. Subdiagram editor
 
@@ -208,7 +208,7 @@ Using the _Rename_ refactoring, you can change the name of a variable, event or
 
 To initiate renaming, right-click on the name of a variable, event or interface in the diagram editor, in the definition section, or in a text field in the _Properties_ view, then select _Rename …_.
 
-!(standard-image)images/docu_refactoring-rename_010_renaming-variable.png(Renaming a variable)!
+!images/docu_refactoring-rename_010_renaming-variable.png(Renaming a variable)!
 
 p=. Renaming a variable
 
@@ -222,7 +222,7 @@ The _Fold Incoming Actions_ refactoring moves these actions from the transitions
 
 Consider the following model:
 
-!(standard-image)images/docu_refactoring-fold-incoming-actions_010_example_01.png(Moving incoming actions to entry block)!
+!images/docu_refactoring-fold-incoming-actions_010_example_01.png(Moving incoming actions to entry block)!
 
 p=. Moving incoming actions to entry block
 
@@ -230,7 +230,7 @@ Only the most-right action _y += 42_ can be moved to the entry block of the targ
 
 Another aspect to take into account are transitions leading to target states that are nested in composite states. Consider the following example:
 
-!(standard-image)images/docu_refactoring-fold-incoming-actions_020_example_02.png(Moving incoming actions into a nested state's entry block)!
+!images/docu_refactoring-fold-incoming-actions_020_example_02.png(Moving incoming actions into a nested state's entry block)!
 
 p=. Moving incoming actions into a nested state's entry block
 
@@ -244,7 +244,7 @@ The _Fold Outgoing Actions_ refactoring is similar to "folding incoming actions"
 
 Preconditions for this refactoring are analog to ""Folding incoming actions"":#folding-incoming-actions. Consider the following example:
 
-!(standard-image)images/docu_refactoring-fold-outgoing-actions_010_example_01.png(Moving outgoing actions to exit block)!
+!images/docu_refactoring-fold-outgoing-actions_010_example_01.png(Moving outgoing actions to exit block)!
 
 p=. Moving outgoing actions to exit block
 
@@ -266,7 +266,7 @@ This refactoring is the reverse of "folding outgoing actions":#folding-outgoing-
 
 Transitions crossing the borders of composite states enclosing the source state might inhibit refactoring. Consider the following example:
 
-!(standard-image)images/docu_refactoring-unfold-outgoing-actions_010_example_01.png(Unfolding exit actions to outgoing transitions)!
+!images/docu_refactoring-unfold-outgoing-actions_010_example_01.png(Unfolding exit actions to outgoing transitions)!
 
 p=. Unfolding exit actions to outgoing transitions
 
@@ -321,7 +321,7 @@ The statechart editor allows for comparing two or even three statecharts to each
 
 p(#oss_fig_comparing_two_statecharts). 
 
-!(standard-image)images/docu_comparing_statecharts_010_result.png(Comparing two statecharts)!
+!images/docu_comparing_statecharts_010_result.png(Comparing two statecharts)!
 
 p=. Comparing two statecharts
 
@@ -354,13 +354,13 @@ A statechart can be saved as an image file as shown in the following steps:
 
 In the statechart editor, right-click on the main region. The context menu appears.
 
-!(standard-image)images/docu_exporting_statechart_as_image_010_save_as_menu_item.png(Selecting the "Save As Image File..." menu item)!
+!images/docu_exporting_statechart_as_image_010_save_as_menu_item.png(Selecting the "Save As Image File..." menu item)!
 
 p=. Selecting the _Save As Image File..._ menu item
 
 In the context menu, select File → Save As Image File.... The _Save As Image_ dialog appears.
 
-!(standard-image)images/docu_exporting_statechart_as_image_020_save_as_dialog.png(The "Save As Image File" dialog)!
+!images/docu_exporting_statechart_as_image_020_save_as_dialog.png(The "Save As Image File" dialog)!
 
 p=. The _Save As Image File_ dialog
 
@@ -395,7 +395,7 @@ The nice thing is that you don't have to remember all the places you took a note
 
 p(#oss_fig_tasks-defined-by-tags-in-the-statechart-showing-up-in-the-tasks-view). 
 
-!(standard-image)images/docu_task_tags_010_task_view.png(Tasks defined by tags in the statechart showing up in the "Tasks" view)!
+!images/docu_task_tags_010_task_view.png(Tasks defined by tags in the statechart showing up in the "Tasks" view)!
 
 p=. Tasks defined by tags in the statechart showing up in the _Tasks_ view
 
@@ -431,7 +431,7 @@ When you start the example wizard for the first time, it does not yet have any e
 # The example wizard outputs a message saying that it could not find any examples and offers to download them.
 # Click on the _Download_ button. The example wizard downloads the online examples repository and creates a clone of it on your local computer. This can take some time. – Downloading can fail for a variety of reasons, not being able to access the Github server being one of them. If this happens, don't panic – and read how to "manually create a local copy of the examples repository":#manually-creating-a-local-copy-of-the-examples-repository.
 
-!(standard-image)images/docu_example_wizard_download.png(Example wizard when invoked for the first time)!
+!images/docu_example_wizard_download.png(Example wizard when invoked for the first time)!
 
 p=. Example wizard when invoked for the first time
 
@@ -458,7 +458,7 @@ Click on an example to select it and show its documentation on the right-hand si
 
 Click on _Finish_ to create the selected example as a new project in your workspace.
 
-!(standard-image)images/docu_example_wizard_browse.png(Example wizard showing all available examples)!
+!images/docu_example_wizard_browse.png(Example wizard showing all available examples)!
 
 p=. Example wizard showing all available examples
 
@@ -505,7 +505,7 @@ h3(#updating-the-examples-respository). Updating the examples repository
 
 When the example wizard is started and the storage location is a clone of the online examples directory, it checks whether there are any updates in the online examples repository. If new examples are available or existing examples have changed in the online repository the example wizard offers to update your local examples repository clone accordingly.
 
-!(standard-image)images/docu_example_wizard_update.png(Example wizard offering to update the examples repository)!
+!images/docu_example_wizard_update.png(Example wizard offering to update the examples repository)!
 
 p=. Example wizard offering to update the examples repository
 
@@ -532,7 +532,7 @@ In the subsequent sections we will quickly walk through the preferences.
 h3(#diagram-appearance). Diagram appearance
 
 p(#fig_preferences-diagram-appearance). 
-!(standard-image)images/docu_preferences_010_diagram_appearance_01.png(Preferences: Diagram Appearance)!
+!images/docu_preferences_010_diagram_appearance_01.png(Preferences: Diagram Appearance)!
 
 p=. Preferences: Diagram Appearance
 
@@ -555,7 +555,7 @@ However, on very large and complex statechart models, validation may take a cons
 h3(#example-wizard). Example wizard
 
 p(#fig_preferences-example-wizard). 
-!(standard-image)images/docu_preferences_020_examples_01.png(Preferences: Example wizard)!
+!images/docu_preferences_020_examples_01.png(Preferences: Example wizard)!
 
 p=. Preferences: Example wizard
 
@@ -564,7 +564,7 @@ You can change the example wizard storage location here. It is a local directory
 h3(#expressions-preferences). Expressions preferences
 
 p(#fig_preferences-expressions). 
-!(standard-image)images/docu_preferences_030_expressions_01.png(Preferences: Expressions)!
+!images/docu_preferences_030_expressions_01.png(Preferences: Expressions)!
 
 p=. Preferences: Expressions
 
@@ -573,7 +573,7 @@ Certain dialogs in the statechart editor allow you to opt for never seeing them
 h4(#expression-syntax-coloring). Expression syntax coloring
 
 p(#fig_preferences-expression-syntax-coloring). 
-!(standard-image)images/docu_preferences_040_expressions_syntax_coloring_01.png(Preferences: Expression syntax coloring)!
+!images/docu_preferences_040_expressions_syntax_coloring_01.png(Preferences: Expression syntax coloring)!
 
 p=. Preferences: Expression syntax coloring
 
@@ -582,7 +582,7 @@ This preferences pane defines foreground color, background color, font, and styl
 h4(#expression-templates). Expression templates
 
 p(#fig_preferences-expression-templates). 
-!(standard-image)images/docu_preferences_050_expressions_template_01.png(Preferences: Expression templates)!
+!images/docu_preferences_050_expressions_template_01.png(Preferences: Expression templates)!
 
 p=. Preferences: Expression templates
 
@@ -595,7 +595,7 @@ On this preference pane you can create, edit, and delete statechart language tem
 h3(#generator-model). Generator model
 
 p(#fig_preferences-generator-model). 
-!(standard-image)images/docu_preferences_060_generator_model_01.png(Preferences: Generator model)!
+!images/docu_preferences_060_generator_model_01.png(Preferences: Generator model)!
 
 p=. Preferences: Generator model
 
@@ -604,7 +604,7 @@ By default code generators automatically generate artifacts defined by generator
 h4(#generator-model-refactoring). Generator model refactoring
 
 p(#fig_preferences-generator-model-refactoring). 
-!(standard-image)images/docu_preferences_070_generator_model_refactoring_01.png(Preferences: Generator model refactoring)!
+!images/docu_preferences_070_generator_model_refactoring_01.png(Preferences: Generator model refactoring)!
 
 p=. Preferences: Generator model refactoring
 
@@ -613,7 +613,7 @@ Change these preference settings for refactoring in generator models as you see
 h4(#generator-model-syntax-coloring). Generator model syntax coloring
 
 p(#fig_preferences-generator-model-syntax-coloring). 
-!(standard-image)images/docu_preferences_080_generator_syntax_coloring_01.png(Preferences: Generator model syntax coloring)!
+!images/docu_preferences_080_generator_syntax_coloring_01.png(Preferences: Generator model syntax coloring)!
 
 p=. Preferences: Generator model syntax coloring
 
@@ -622,7 +622,7 @@ This preferences pane defines foreground color, background color, font, and styl
 h4(#generator-model-templates). Generator model templates
 
 p(#fig_preferences-generator-model-templates). 
-!(standard-image)images/docu_preferences_090_generator_templates_01.png(Preferences: Generator model templates)!
+!images/docu_preferences_090_generator_templates_01.png(Preferences: Generator model templates)!
 
 p=. Preferences: Generator model templates
 
@@ -635,7 +635,7 @@ On this preference pane you can create, edit, and delete generator model languag
 h3(#simulation). Simulation
 
 p(#fig_preferences-simulation). 
-!(standard-image)images/docu_preferences_100_simulation_01.png(Preferences: Simulation)!
+!images/docu_preferences_100_simulation_01.png(Preferences: Simulation)!
 
 p=. Preferences: Simulation
 

plugins/org.yakindu.sct.doc.user/src/user-guide/generating_code.textile

@@ -12,7 +12,7 @@ To create a generator model with the wizard, proceed as follows:
 # Choose the desired generator, i. e. _YAKINDU SCT Java Code Generator_.
 # Check the model(s) to generate code from and click _Finish_.
 
-!(standard-image)images/docu_genmodelwizardchooselanguage.jpg(Selecting code generator and models)!
+!images/docu_genmodelwizardchooselanguage.jpg(Selecting code generator and models)!
 
 p=. Selecting code generator and models
 
@@ -55,7 +55,7 @@ h2(#configuring-a-generator). Configuring a generator
 
 As mentioned above, all generators can be set up and customized by a generator model. The following screenshot shows a sample configuration for the Java code generator.
 
-!(standard-image)images/docu_sGenEditor.png(SGen generator model with default values)!
+!images/docu_sGenEditor.png(SGen generator model with default values)!
 
 p=. SGen generator model with default values
 
@@ -255,7 +255,7 @@ h2(#c-specification-of-c-code). Specification of C code
 
 The explanations below are using the _Traffic Light (C)_ sample state machine to describe the API specifications of the code generated by the YAKINDU C code generator. The image below is showing the statechart. It models a pedestrian crossing with push-button operated traffic lights ("pelican crossing").
 
-!(standard-image)images/docu_TrafficLight.png(The traffic light model)!
+!(full)images/docu_TrafficLight.png(The traffic light model)!
 
 p=. The traffic light model
 
@@ -614,7 +614,7 @@ h3(#c-operation-callbacks). Operation callbacks
 
 YAKINDU Statechart Tools support client code operations that can be used by a state machine and are executed as actions. These operations have to be implemented in order to make a statechart executable. The figure below shows a sample statechart using an operation:
 
-!(standard-image)images/docu_operationExample.png(Specifying an operation callback in the model)!
+!images/docu_operationExample.png(Specifying an operation callback in the model)!
 
 p=. Specifying an operation callback in the model
 
@@ -771,7 +771,7 @@ h2(#cpp-specification-of-cpp-code). Specification of C++ code
 
 The explanations below are using the _Traffic Light (C++)_ sample state machine to describe the API specifications of the code generated by the YAKINDU C++ generator. The image below is showing the statechart. It models a pedestrian crossing with push-button operated traffic lights ("pelican crossing").
 
-!(standard-image)images/docu_TrafficLight.png(The traffic light model)!
+!(full)images/docu_TrafficLight.png(The traffic light model)!
 
 p=. The traffic light model
 
@@ -1147,7 +1147,7 @@ h3(#cpp-operation-callbacks). Operation callbacks
 
 YAKINDU Statechart Tools support client code operations that can be used by a state machine and are executed as as actions. These operations have to be implemented in order to make a statechart executable. The figure below shows a sample statechart using an operation:
 
-!(standard-image)images/docu_operationExample.png(Specifying an operation callback in the model)!
+!images/docu_operationExample.png(Specifying an operation callback in the model)!
 
 p=. Specifying an operation callback in the model
 
@@ -1283,7 +1283,7 @@ h2(#java-specification-of-java-code). Specification of Java code
 
 The explanations below are using the _Traffic Light (Java)_ sample state machine to describe the API specifications of the code generated by the YAKINDU Java code generator. The image below is showing the statechart. It models a pedestrian crossing with push-button operated traffic lights ("pelican crossing").
 
-!(standard-image)images/docu_TrafficLight.png(The traffic light model)!
+!(full)images/docu_TrafficLight.png(The traffic light model)!
 
 p=. The traffic light model
 
@@ -1904,7 +1904,7 @@ h3(#java-operation-callback). Operation callbacks
 
 YAKINDU Statechart Tools support _operations_ that are executed by a state machine as actions, but are implemented by client-side code. The figure below shows a sample statechart using an operation:
 
-!(standard-image)images/docu_operationExample.png(Specifying an operation callback in the model)!
+!images/docu_operationExample.png(Specifying an operation callback in the model)!
 
 p=. Specifying an operation callback in the model
 
@@ -2050,7 +2050,7 @@ h3(#java-simulating-operations-with-custom-java-code). Simulating operations wit
 
 To simulate a model with operations it is possible to use custom Java code that mocks the desired behavior or even to simulate against an existing Java backend. For this purpose it is required to provide one or more custom Java classes having a method with a matching signature. 
 
-!(standard-image)images/docu_java_simulating_operation_010_statechart_with_operation.png(A statechart model with an operation)!
+!images/docu_java_simulating_operation_010_statechart_with_operation.png(A statechart model with an operation)!
 
 p=. A statechart model with an operation
 
@@ -2079,7 +2079,7 @@ This custom class can be passed to Eclipse's run configuration as an _Operation
 
 When the simulation is executed, the variable _result_ gets the value 2.
 
-!(standard-image)images/docu_java_simulating_operation_020_run_configuration.png(Configuring an operations class)!
+!images/docu_java_simulating_operation_020_run_configuration.png(Configuring an operations class)!
 
 p=. Configuring an operations class
 
@@ -2098,7 +2098,7 @@ Creating custom code generators is a built-in concept in YAKINDU Statechart Tool
 
 To set up a new (Xtend2/Java) generator project, select _File → New → Other... → YAKINDU SCT_ → Xtend2/Java Generator Project_ and click _Next_.
 
-!(standard-image)images/docu_xtendGenerator.png(Creating an Xtend2 generator project)!
+!images/docu_xtendGenerator.png(Creating an Xtend2 generator project)!
 
 p=. Creating an Xtend2 generator project
 
@@ -2106,7 +2106,7 @@ The wizard asks for a *Project name* and the name of the *Generator class*, whic
 
 The check box *Configure for Plugin Export* adds all required extension point registrations to the new project for exporting it as a plugin. The generator model can refer to the new generator plugin via its unique *Generator ID*. If you want to contribute custom generator features for your code generator, check the *Create Feature Library* check box. Click _Finish_ to close the wizard.
 
-!(standard-image)images/docu_generatornavigator.png(Created generator project)!
+!images/docu_generatornavigator.png(Created generator project)!
 
 p=. Created generator project
 
@@ -2171,7 +2171,7 @@ h2(#different-meta-models-for-different-use-cases). Different meta models for di
 *The SGraph meta model*
 The SGraph meta model defines the structural aspects of the Statechart model and is similiar to the statemachine model defined by the Unified Modeling Language (UML). A simplified version is shown in the following diagram.   
 
-!(standard-image)images/docu_sgraph_simple.png(Simplified SGraph meta model)!
+!images/docu_sgraph_simple.png(Simplified SGraph meta model)!
 
 p=. Simplified SGraph meta model
 

plugins/org.yakindu.sct.doc.user/src/user-guide/generating_code_headless.textile

@@ -33,7 +33,7 @@ p. To install the headless generation feature into the open edition or another e
 
 p(#hdls_fig_yakindu_statechart_tools_professional_edition_download_options). 
 
-!(standard-image)images/docu_headless_downloadpage.png(YAKINDU Statechart Tools Professional Edition download options)!
+!images/docu_headless_downloadpage.png(YAKINDU Statechart Tools Professional Edition download options)!
 
 p=. YAKINDU Statechart Tools Professional Edition download options
 
@@ -51,7 +51,7 @@ p=. YAKINDU Statechart Tools Professional Edition download options
 
 p(#hdls_fig_installing_the_headless_code_generation_feature). 
 
-!(standard-image)images/docu_headless_updatesite.png(Installing the headless code generation feature)!
+!images/docu_headless_updatesite.png(Installing the headless code generation feature)!
 
 p=. Installing the headless code generation feature
 

plugins/org.yakindu.sct.doc.user/src/user-guide/overview.textile

@@ -13,7 +13,7 @@ The statechart tools are a central part of YAKINDU: the modular toolkit for mode
 
 The following graph shows these features and their relation to each other:
 
-!(standard-image)images/docu_YAKINDU_features.png(Features of YAKINDU Statechart Tools)!
+!(large)images/docu_YAKINDU_features.png(Features of YAKINDU Statechart Tools)!
 
 p=. Features of YAKINDU Statechart Tools
 

plugins/org.yakindu.sct.doc.user/src/user-guide/statechart_language.textile

@@ -123,7 +123,7 @@ h3(#region). Region
 
 YAKINDU statecharts are organized in regions. Hence it is possible to organize multiple state machines in different regions and to run them virtually concurrently.
 
-!(standard-image)images/docu_parallelRegions.jpg(Parallel regions)!
+!images/docu_parallelRegions.jpg(Parallel regions)!
 
 p=. Parallel regions
 
@@ -139,7 +139,7 @@ A state can have _behavior_. The behavior specifies which "actions":#reactions a
 The state *Countdown* in the following example has three local reactions:
 
 p(#fig_state-example). 
-!(standard-image)images/docu_state_010_example_01.png(State example)!
+!images/docu_state_010_example_01.png(State example)!
 
 p=. State example: A simple state machine to launch a rocket.
 
@@ -159,7 +159,7 @@ A transition should have a _transition "reaction":#reactions_. The transition re
 Here's an example:
 
 p(#fig_transition-example). 
-!(standard-image)images/docu_transition_030_example_01.png(Transition example)!
+!images/docu_transition_030_example_01.png(Transition example)!
 
 p=. Transition example: A simple state machine to launch a rocket.
 
@@ -168,7 +168,7 @@ The initial transition's _effect_ sets the counting variable _t_ to 10. As long
 Figure ""Transition syntax overview"":#fig_transition-syntax-overview shows how the syntax of a transition reaction is defined.
 
 p(#fig_transition-syntax-overview). 
-!(standard-image)images/docu_grammar_030_transition-overview.png(Transition syntax overview)!
+!images/docu_grammar_030_transition-overview.png(Transition syntax overview)!
 
 p=. Transition syntax overview
 
@@ -201,7 +201,7 @@ The transition shown on the left specifies @# no_problem> >success@. This means:
 Alternatively, _Process_ could have been modeled with two different error exit states, say _error_1_ and _error_2_. This would allow to respond differently to different error conditions, while still enabling to catch them both with a single flow. A transition with @# >error_1 >error_2 problem>@ would do so.
 
 p(#fig_state_entry_exit). 
-!(standard-image)images/docu_state_entry_exit.png(Entries and exits)!
+!images/docu_state_entry_exit.png(Entries and exits)!
 
 p=. Entries and exits
 
@@ -210,7 +210,7 @@ h4(#transition-priorities). Transition priorities
 If a state has several outgoing transitions, based on the events that occured and on guard conditions, several of these transitions could fire at the same time. Here's simple example:
 
 p(#fig_transition-priorities-1). 
-!(standard-image)images/docu_transition_020_priorities_01.png(Transition priorities [1])!
+!images/docu_transition_020_priorities_01.png(Transition priorities [1])!
 
 p=. Transition priorities [1]
 
@@ -221,7 +221,7 @@ As you can see in figure ""Transition priorities [1]"":#fig_transi
 The order of transitions is a property of their source state. In the example above, the transition priorities of state *A* appear like this in the _Properties_ view:
 
 p(#fig_transition-priorities-2). 
-!(standard-image)images/docu_transition_020_priorities_02.png(Transition priorities [2])!
+!images/docu_transition_020_priorities_02.png(Transition priorities [2])!
 
 p=. Transition priorities [2]
 
@@ -237,7 +237,7 @@ An entry has a single outgoing transition and no incoming ones. Its outgoing tra
 An entry is depicted as a filled circle, see figure ""Entry, exit, and final state"":#fig_state_entry_exit_final_explained.
 
 p(#fig_state_entry_exit_final_explained). 
-!(standard-image)images/docu_state_entry_exit_final_explained.png(Entry, exit, and final state)!
+!(large)images/docu_state_entry_exit_final_explained.png(Entry, exit, and final state)!
 
 p=. Entry, exit, and final state
 
@@ -260,7 +260,7 @@ Named entries have no equivalent in the UML.
 The sample statechart in figure ""Entry state"":#fig_state_entry has a composite state named _Handle result_. This composite state has a default entry as well as an entry called _failure_. If state *A* is active and the _error_ trigger fires, control is transitioned to the _Handle result_ composite state. The notation @error # >failure@ specifies that the _failure_ entry is to be used; see "Entry and exit points":#entry-and-exit-points.
 
 p(#fig_state_entry). 
-!(standard-image)images/docu_state_entry.png(Entry state)!
+!images/docu_state_entry.png(Entry state)!
 
 p=. Entry state
 
@@ -319,7 +319,7 @@ A synchronization state is shown as a thick horizontal or vertical line, as can
 
 p(#fig_state_synchronization). 
 
-!(standard-image)images/docu_state_synchronization.png(Synchronization state)!
+!images/docu_state_synchronization.png(Synchronization state)!
 
 p=. Synchronization state
 
@@ -349,7 +349,7 @@ Orthogonal states are basically "composite states":#composite-state with more th
 
 The presumably most famous example for orthogonal states is the keyboard example:
 
-!(standard-image)images/docu_orthogonalState_example.jpg(Orthogonal states)!
+!images/docu_orthogonalState_example.jpg(Orthogonal states)!
 
 p=. Orthogonal states
 
@@ -360,17 +360,17 @@ The shallow history state is a pseudo state that is placed inside regions of com
 
 The following example, showing the answering of a questionaire, explains this:
 
-!(standard-image)images/docu_shallowHistory01.jpg(Shallow history [1])!
+!images/docu_shallowHistory01.jpg(Shallow history [1])!
 
 p=. Shallow history [1]
 
 Particularly interesting in this statechart are the _checkProgress_ and _goon_ events. The _checkProgress_ event jumps back to the *init* state while assigning the current progress count to the variable _temp_. The event _goon_ jumps to the shallow history state that was placed inside the composite state.
 
-!(standard-image)images/docu_shallowHistory02.jpg(Shallow history [2])!
+!images/docu_shallowHistory02.jpg(Shallow history [2])!
 
 p=. Shallow history [2]
 
-!(standard-image)images/docu_shallowHistory03.jpg(Shallow history [3])!
+!images/docu_shallowHistory03.jpg(Shallow history [3])!
 
 p=. Shallow history [3]
 
@@ -594,7 +594,7 @@ p.
 Figure ""Event specifications syntax overview"":#fig_transition-syntax-overview shows where to put event specifications in a reaction trigger and how their syntax is defined.
 
 p(#fig_event-specifications-syntax-overview). 
-!(standard-image)images/docu_grammar_030_event-specification-overview.png(Event specifications syntax overview)!
+!images/docu_grammar_030_event-specification-overview.png(Event specifications syntax overview)!
 
 p=. Event specifications syntax overview
 
@@ -706,7 +706,7 @@ In the square brackets you can use any "expression":#expressions that evaluates
 Please consult figure ""Guard condition syntax overview"":#fig_guard-condition-syntax-overview to find out how a guard condition syntactically fits into a reaction.
 
 p(#fig_guard-condition-syntax-overview). 
-!(standard-image)images/docu_grammar_030_guard-condition-overview.png(Guard condition syntax overview)!
+!images/docu_grammar_030_guard-condition-overview.png(Guard condition syntax overview)!
 
 p=. Guard condition syntax overview
 
@@ -728,7 +728,7 @@ A reaction in a state always has a _reaction effect_ with at least one action.
 Figure ""Reaction effect syntax"":#fig_reaction-effect-syntax shows the syntax definition.
 
 p(#fig_reaction-effect-syntax). 
-!(standard-image)images/docu_grammar_030_reaction-effect.png(Reaction effect syntax)!
+!images/docu_grammar_030_reaction-effect.png(Reaction effect syntax)!
 
 p=. Reaction effect syntax
 
@@ -750,7 +750,7 @@ If an event _e_ is raised in region _r<sub>m</sub>_, then _e_ is available only
  The following example illustrates this. When the state machine is started, the situation is as shown in figure "&quot;Raising an event &#91;1]&quot;":#fig_raising-an-event_1: *A* and *X* in the parallel regions _r1_ and _r2_ are active states. Important: Region _r1_ is executed *before* _r2_.
 
 p(#fig_raising-an-event_1). 
-!(standard-image)images/docu_transition_010_raise_event_01.png(Raising an event [1])!
+!images/docu_transition_010_raise_event_01.png(Raising an event [1])!
 
 p=. Raising an event &#91;1]
 
@@ -759,7 +759,7 @@ Now event _e1_ occurs. It triggers transition *A → B* in _r1_. This transition
 After that the situation is now as can be seen in figure "&quot;Raising an event &#91;2]&quot;":#fig_raising-an-event_2: substates *B* and *Y* are now active states. However, the transition *B → C* will not be taken, because that would have to happen in another RTC. But by then the particular _e2_ instance raised by *A → B* will be long gone, since it was restricted to the RTC it has been raised in.
 
 p(#fig_raising-an-event_2). 
-!(standard-image)images/docu_transition_010_raise_event_02.png(Raising an event [2])!
+!images/docu_transition_010_raise_event_02.png(Raising an event [2])!
 
 p=. Raising an event &#91;2]
 
@@ -768,7 +768,7 @@ Orthogonal regions within a state are always executed from left to right or from
 The region priorities of the example above are shown in figure "&quot;Region priorities&quot;":#fig_region-priorities. Change the execution order and the example will behave differently than described.
 
 p(#fig_region-priorities). 
-!(standard-image)images/docu_regions_010_priorities_01.png(Region priorities)!
+!images/docu_regions_010_priorities_01.png(Region priorities)!
 
 p=. Region priorities
 
@@ -876,7 +876,7 @@ h3(#bitwise-and). Bitwise AND
 bc. expr1 & expr2
 
 
-h3(#logical-relations-and-shift-operators). Logical Relations and Shift Operators
+h3(#logical-relations-and-shift-operators). Logical relations and shift operators
 
 |<. less than|<. @<@|
 |<. equal or less than|<. @<=@|
@@ -943,7 +943,7 @@ The grammar is visualized using "railroad diagrams":https://en.wikipedia.org/wik
 
 p(#fig-railroad-diagrams-explained). 
 
-!(standard-image)images/docu_grammar_020_simpleelementreferenceexpression.png(Railroad diagrams explained)!
+!images/docu_grammar_020_simpleelementreferenceexpression.png(Railroad diagrams explained)!
 
 p=. Railroad diagrams explained
 
@@ -971,7 +971,7 @@ Figure "&quot;Statechart grammar&quot;":#fig-statechart-grammar shows the statec
 
 p(#fig-statechart-grammar). 
 
-!(standard-image)images/docu_grammar_010_stext.png(Statechart grammar)!
+!images/docu_grammar_010_stext.png(Statechart grammar)!
 
 p=. Statechart grammar
 
@@ -981,6 +981,6 @@ Figure "&quot;Expressions grammar&quot;":#fig-expressions-grammar shows the expr
 
 p(#fig-expressions-grammar). 
 
-!(standard-image)images/docu_grammar_010_expressions.png(Expressions grammar)!
+!images/docu_grammar_010_expressions.png(Expressions grammar)!
 
 p=. Expressions grammar