2 files changed, 88 insertions, 0 deletions
diff --git a/src/client/views/nodes/DiagramBox.tsx b/src/client/views/nodes/DiagramBox.tsx
new file mode 100644
index 000000000..e2af0b670
--- /dev/null
+++ b/src/client/views/nodes/DiagramBox.tsx
@@ -0,0 +1,86 @@
+import { action, computed, makeObservable, observable } from 'mobx';
+import { observer } from 'mobx-react';
+import * as React from 'react';
+import { emptyFunction, setupMoveUpEvents } from '../../../Utils';
+import { Doc, Opt } from '../../../fields/Doc';
+import { DocCast, NumCast, StrCast } from '../../../fields/Types';
+import { Docs } from '../../documents/Documents';
+import { DragManager } from '../../util/DragManager';
+import { undoBatch } from '../../util/UndoManager';
+import { ViewBoxAnnotatableComponent, ViewBoxInterface } from '../DocComponent';
+import { StyleProp } from '../StyleProvider';
+import './ComparisonBox.scss';
+import { FieldView, FieldViewProps } from './FieldView';
+import { PinProps, PresBox } from './trails';
+import mermaid from 'mermaid';
+
+interface MermaidProps {
+    chart: String; 
+  }
+
+class Mermaid extends React.Component<MermaidProps> {
+    componentDidMount() {
+      mermaid.contentLoaded();
+    }
+    render() {
+      return <div className="mermaid">{this.props.chart}</div>;
+    }
+  }
+
+@observer
+export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() implements ViewBoxInterface {
+    
+    public static LayoutString(fieldKey: string) {
+        return FieldView.LayoutString(DiagramBox, fieldKey);
+    }
+    constructor(props: FieldViewProps) {
+        super(props);
+        makeObservable(this);
+        mermaid.initialize({ startOnLoad: true });
+    }
+
+    @observable _animating = '';
+
+    @computed get clipWidth() {
+        return NumCast(this.layoutDoc[this.clipWidthKey], 50);
+    }
+    get clipWidthKey() {
+        return '_' + this._props.fieldKey + '_clipWidth';
+    }
+ 
+    componentDidMount() {
+        this._props.setContentViewBox?.(this);
+    }
+    getAnchor = (addAsAnnotation: boolean, pinProps?: PinProps) => {
+        const anchor = Docs.Create.ConfigDocument({
+            title: 'CompareAnchor:' + this.Document.title,
+            // set presentation timing properties for restoring view
+            presentation_transition: 1000,
+            annotationOn: this.Document,
+        });
+        if (anchor) {
+            if (!addAsAnnotation) anchor.backgroundColor = 'transparent';
+            /* addAsAnnotation &&*/ this.addDocument(anchor);
+            PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: { ...(pinProps?.pinData ?? {}), clippable: true } }, this.Document);
+            return anchor;
+        }
+        return this.Document;
+    };
+    docStyleProvider = (doc: Opt<Doc>, props: Opt<FieldViewProps>, property: string): any => {
+        if (property === StyleProp.PointerEvents) return 'none';
+        return this._props.styleProvider?.(doc, props, property);
+    };
+    _closeRef = React.createRef<HTMLDivElement>();
+    render() {
+        return (
+            <div>
+                <Mermaid chart={`
+                    graph LR;
+                    A-->B;
+                    B-->C;
+                    B-->D[hi];  
+                    `}/>
+            </div>
+        );
+    }
+}
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
index 07e179246..040c8364d 100644
--- a/src/client/views/nodes/DocumentContentsView.tsx
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -23,6 +23,7 @@ import { DashWebRTCVideo } from '../webcam/DashWebRTCVideo';
 import { YoutubeBox } from './../../apis/youtube/YoutubeBox';
 import { AudioBox } from './AudioBox';
 import { ComparisonBox } from './ComparisonBox';
+import { DiagramBox } from './DiagramBox';
 import { DataVizBox } from './DataVizBox/DataVizBox';
 import './DocumentView.scss';
 import { EquationBox } from './EquationBox';
@@ -263,6 +264,7 @@ export class DocumentContentsView extends ObservableReactComponent<DocumentConte
                     DataVizBox,
                     HTMLtag,
                     ComparisonBox,
+                    DiagramBox,
                     LoadingBox,
                     PhysicsSimulationBox,
                     SchemaRowBox,