--- a/client/src/assets/application.scss	Wed Mar 27 17:00:45 2019 +0100
+++ b/client/src/assets/application.scss	Wed Mar 27 18:12:42 2019 +0100
@@ -105,6 +105,20 @@
   font-weight: bold;
 }
 
+.box-control {
+  display: inline-block;
+  margin-left: 3px;
+  color: #888;
+  padding: 3px 7px;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  transition: background-color 0.3s, color 0.3s;
+  &:hover {
+    color: #666;
+    background-color: #eee;
+  }
+}
+
 .expanded {
   max-height: 999px;
   max-width: 999px;

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/DiagramLegend.vue	Wed Mar 27 18:12:42 2019 +0100
@@ -0,0 +1,58 @@
+<template>
+  <div :class="['border-right', { collapsed }]" id="diagram-legend">
+    <span class="box-control toggle" @click="collapsed = !collapsed">
+      <font-awesome-icon icon="angle-left" fixed-width />
+    </span>
+    <div style="overflow: hidden">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style lang="sass" scoped>
+#diagram-legend
+  position: relative
+  width: 280px
+  .toggle
+    margin-left: 0
+    position: absolute
+    top: 0.25rem
+    left: 0.25rem
+    svg
+      transition: transform 0.3s
+  &.collapsed
+    width: 0
+    .toggle
+      left: 0.25rem
+      svg
+        transform: rotateY(180deg)
+</style>
+
+<script>
+/* This is Free Software under GNU Affero General Public License v >= 3.0
+ * without warranty, see README.md and license for details.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ * License-Filename: LICENSES/AGPL-3.0.txt
+ *
+ * Copyright (C) 2018 by via donau
+ *   – Österreichische Wasserstraßen-Gesellschaft mbH
+ * Software engineering by Intevation GmbH
+ *
+ * Author(s):
+ * Markus Kottländer <markus.kottlaender@intevation.de>
+ */
+
+export default {
+  data() {
+    return {
+      collapsed: false
+    };
+  },
+  watch: {
+    collapsed() {
+      this.$nextTick(this.$parent.drawDiagram);
+    }
+  }
+};
+</script>

--- a/client/src/components/ui/UIBoxHeader.vue	Wed Mar 27 17:00:45 2019 +0100
+++ b/client/src/components/ui/UIBoxHeader.vue	Wed Mar 27 18:12:42 2019 +0100
@@ -9,21 +9,30 @@
       />
       {{ title }}
     </span>
-    <div class="box-controls">
+    <div>
       <span
+        class="box-control"
         v-for="(action, index) in actions"
         :key="index"
         @click="action.callback"
       >
         <font-awesome-icon :icon="action.icon" />
       </span>
-      <span @click="collapseCallback" v-if="!collapsed && collapseCallback">
+      <span
+        class="box-control"
+        @click="collapseCallback"
+        v-if="!collapsed && collapseCallback"
+      >
         <font-awesome-icon :icon="['far', 'window-minimize']" />
       </span>
-      <span @click="expandCallback" v-if="collapsed && expandCallback">
+      <span
+        class="box-control"
+        @click="expandCallback"
+        v-if="collapsed && expandCallback"
+      >
         <font-awesome-icon :icon="['far', 'window-maximize']" />
       </span>
-      <span @click="closeCallback" v-if="closeCallback">
+      <span class="box-control" @click="closeCallback" v-if="closeCallback">
         <font-awesome-icon icon="times" />
       </span>
     </div>
@@ -49,18 +58,6 @@
     padding-left: 0.25rem
     .box-icon
       margin-right: 0.25rem
-  .box-controls
-    span
-      display: inline-block
-      margin-left: 3px
-      color: #888
-      padding: 3px 7px
-      border-radius: 0.25rem
-      cursor: pointer
-      transition: background-color 0.3s, color 0.3s
-      &:hover
-        color: #666
-        background-color: #eee
 </style>
 
 <script>