4 files changed, 85 insertions, 0 deletions
diff --git a/public/src/app/diagram/diagram.component.html b/public/src/app/diagram/diagram.component.html
new file mode 100644
index 0000000..b3cb28a
--- /dev/null
+++ b/public/src/app/diagram/diagram.component.html
@@ -0,0 +1,19 @@
+<svg id="diagram" #diagram>
+  <svg viewBox="0 0 500 500" width="100%" height="500px" preserveAspectRatio="xMaxYMin meet" *ngFor="let item of list; let i = index">
+
+    <svg width="80px">
+      <text x="0" [attr.y]="45 * (i+1)">
+        {{item.source}}
+      </text>
+    </svg>
+
+    <circle cx="100" [attr.cy]="44 * (i+1)" r="5" />
+    <line x1="100" [attr.y1]="44 * (i+1)" [attr.x2]="maxWidth - 150" [attr.y2]="44 * (i+1)" stroke-width="2" stroke="black" stroke-dasharray="5, 5"
+      class="line" />
+    <circle [attr.cx]="maxWidth - 150" [attr.cy]="44 * (i+1)" r="5" />
+
+    <text [attr.x]="maxWidth - 130" [attr.y]="45 * (i+1)">
+      {{item.target}}
+    </text>
+  </svg>
+</svg>
diff --git a/public/src/app/diagram/diagram.component.scss b/public/src/app/diagram/diagram.component.scss
new file mode 100644
index 0000000..57437d8
--- /dev/null
+++ b/public/src/app/diagram/diagram.component.scss
@@ -0,0 +1,28 @@
+svg {
+  height: 400px;
+  width: 100%;
+  margin: auto;
+  display: block;
+  .line {
+    stroke-dasharray: 1400;
+    animation: draw 5s ease-in;
+  }
+}
+
+@keyframes draw {
+  from {
+    stroke-dashoffset: -1400;
+  }
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes dude {
+  0% {
+    width: 0;
+  }
+  100% {
+    width: 100%;
+  }
+}
diff --git a/public/src/app/diagram/diagram.component.spec.ts b/public/src/app/diagram/diagram.component.spec.ts
new file mode 100644
index 0000000..535f280
--- /dev/null
+++ b/public/src/app/diagram/diagram.component.spec.ts
@@ -0,0 +1,26 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DiagramComponent } from './diagram.component';
+
+describe('DiagramComponent', () => {
+  let component: DiagramComponent;
+  let fixture: ComponentFixture<DiagramComponent>;
+
+  beforeEach(
+    async(() => {
+      TestBed.configureTestingModule({
+        declarations: [DiagramComponent]
+      }).compileComponents();
+    })
+  );
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DiagramComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/public/src/app/diagram/diagram.component.ts b/public/src/app/diagram/diagram.component.ts
new file mode 100644
index 0000000..a0ae3a1
--- /dev/null
+++ b/public/src/app/diagram/diagram.component.ts
@@ -0,0 +1,12 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-diagram',
+  templateUrl: './diagram.component.html',
+  styleUrls: ['./diagram.component.scss']
+})
+export class DiagramComponent {
+  @Input() list;
+  maxWidth: number = 500;
+  constructor() {}
+}