Adds more docs re: custom elements and views.

dsl/14-language.md

@@ -359,7 +359,7 @@ The interval is a number of seconds (default 60s), and the timeout is a number o
 
 ## element
 
-The `element` keyword defines a [custom element](https://structurizr.com/help/custom-elements) (this is only available on the Structurizr cloud service/on-premises installation/Lite).
+The `element` keyword defines a custom element that sits outside of the C4 model.
 
 ```
 element <name> [metadata] [description] [tags] {
@@ -371,6 +371,8 @@ The following tags are added by default:
 
 - `Element`
 
+See [DSL cookbook - Custom elements](/dsl/cookbook/custom-elements) for an example.
+
 Permitted children:
 
 - [description](#description)
@@ -846,14 +848,17 @@ Permitted children:
 
 ## custom view
 
-The `custom` keyword is used to define a [custom view](/ui/diagrams/custom-view) (this is only available on the Structurizr cloud service/on-premises installation/Lite).
+The `custom` keyword is used to define a [custom view](/ui/diagrams/custom-view).
+Only [custom elements](#element) are permitted to be included on a custom view.
 
 ```
 custom [key] [title] [description] {
  ...
 }
 ```
 
+See [DSL cookbook - Custom view](/dsl/cookbook/custom-view) for an example.
+
 Permitted children:
 
 - [include](#include)

dsl/cookbook/custom-elements/example-1.dsl

@@ -0,0 +1,17 @@
+workspace {
+
+ model {
+ a = softwareSystem "A"
+ b = element "B" "Hardware System"
+
+ a -> b "Sends control signals to"
+ }
+
+ views {
+ systemContext a "Diagram1" {
+ include *
+ autoLayout lr
+ }
+ }
+
+}

dsl/cookbook/custom-elements/index.md

@@ -0,0 +1,38 @@
+---
+layout: default
+title: Custom elements
+parent: Cookbook
+grand_parent: Structurizr DSL
+permalink: /dsl/cookbook/custom-elements/
+---
+
+# Custom elements
+
+The DSL [element](/dsl/language#element) keyword can be used to define elements that sit outside of the C4 model.
+For example, perhaps a software system named A controls a hardware system named B.
+
+```
+workspace {
+
+ model {
+ a = softwareSystem "A"
+ b = element "B" "Hardware System"
+
+ a -> b "Sends control signals to"
+ }
+
+ views {
+ systemContext a "Diagram1" {
+ include *
+ autoLayout lr
+ }
+ }
+ 
+}
+```
+
+[![](example-1.png)](http://structurizr.com/dsl?src=https://docs.structurizr.com/dsl/cookbook/custom-elements/example-1.dsl)
+
+## Links
+
+- [DSL language reference - element](/dsl/language#element)

dsl/cookbook/custom-view/example-1.dsl

@@ -0,0 +1,18 @@
+workspace {
+
+ model {
+ a = element "A" "Type A" "A description of A."
+ b = element "B" "Type B" "A description of B."
+
+ a -> b "Depends upon"
+ }
+
+ views {
+ custom "Diagram1" {
+ title "A custom view"
+ include *
+ autoLayout lr
+ }
+ }
+
+}

dsl/cookbook/custom-view/index.md

@@ -0,0 +1,42 @@
+---
+layout: default
+title: Custom view
+parent: Cookbook
+grand_parent: Structurizr DSL
+permalink: /dsl/cookbook/custom-view/
+---
+
+# Custom view
+
+A [custom view](/ui/diagrams/custom-view) provides a way to create ad hoc diagrams, based upon the
+same model+view approach and rendering engine.
+
+```
+workspace {
+
+ model {
+ a = element "A" "Type A" "A description of A."
+ b = element "B" "Type B" "A description of B."
+
+ a -> b "Depends upon"
+ }
+
+ views {
+ custom "Diagram1" {
+ title "A custom view"
+ include *
+ autoLayout lr
+ }
+ }
+ 
+}
+```
+
+This DSL defines a custom view showing a couple of custom elements.
+
+[![](example-1.png)](http://structurizr.com/dsl?src=https://docs.structurizr.com/dsl/cookbook/custom-view/example-1.dsl)
+
+## Links
+
+- [DSL language reference - element](/dsl/language#element)
+- [DSL language reference - custom](/dsl/language#custom-view)

ui/diagrams/custom-view.md

@@ -29,4 +29,9 @@ included on your diagram key/legend. Custom elements can also be used on custom
 
 ![System context diagram with additional custom elements](images/custom-view-1.png)
 
-![Diagram key/legend for system context diagram with additional custom elements](images/custom-view-2.png)
+![Diagram key/legend for system context diagram with additional custom elements](images/custom-view-2.png)
+
+## Links
+
+- [DSL cookbook - Custom elements](/dsl/cookbook/custom-elements)
+- [DSL cookbook - Custom view](/dsl/cookbook/custom-view)