diff --git a/example/example.tsx b/example/example.tsx
index c6cd64d..d45db26 100644
--- a/example/example.tsx
+++ b/example/example.tsx
@@ -1,6 +1,5 @@
 import React, { FC } from 'react';
 import { Digraph, Node, Subgraph, renderToDot, Edge, DOT } from '../src';
-import { ClusterPortal } from '../src/components/ClusterPortal';
 
 const Example: FC = () => (
   <Digraph
diff --git a/src/components/HtmlLike.ts b/src/components/HtmlLike.ts
index 36bfbe0..26951f3 100644
--- a/src/components/HtmlLike.ts
+++ b/src/components/HtmlLike.ts
@@ -1,5 +1,6 @@
 /* eslint-disable no-undef */
 import { AttributesValue } from 'ts-graphviz';
+import { ValueOf } from '../utils/value-of';
 
 export type TableProps = {
   ALIGN?: 'CENTER' | 'LEFT' | 'RIGHT'; // "CENTER|LEFT|RIGHT"
@@ -84,24 +85,26 @@ export type SProps = NoAttributes;
 export type HrProps = NoAttributes;
 export type VrProps = NoAttributes;
 
-export enum DOT {
-  PORT = 'dot-port',
-  TABLE = 'dot-table',
-  TR = 'dot-tr',
-  TD = 'dot-td',
-  FONT = 'dot-font',
-  BR = 'dot-br',
-  IMG = 'dot-img',
-  I = 'dot-i',
-  B = 'dot-b',
-  U = 'dot-u',
-  O = 'dot-o',
-  SUB = 'dot-sub',
-  SUP = 'dot-sup',
-  S = 'dot-s',
-  HR = 'dot-hr',
-  VR = 'dot-vr',
-}
+export const DOT = Object.freeze({
+  PORT: 'dot-port',
+  TABLE: 'dot-table',
+  TR: 'dot-tr',
+  TD: 'dot-td',
+  FONT: 'dot-font',
+  BR: 'dot-br',
+  IMG: 'dot-img',
+  I: 'dot-i',
+  B: 'dot-b',
+  U: 'dot-u',
+  O: 'dot-o',
+  SUB: 'dot-sub',
+  SUP: 'dot-sup',
+  S: 'dot-s',
+  HR: 'dot-hr',
+  VR: 'dot-vr',
+} as const);
+
+export type DOT = ValueOf<typeof DOT>;
 
 declare global {
   // eslint-disable-next-line @typescript-eslint/no-namespace
diff --git a/src/utils/value-of.ts b/src/utils/value-of.ts
new file mode 100644
index 0000000..5f2cf2c
--- /dev/null
+++ b/src/utils/value-of.ts
@@ -0,0 +1 @@
+export type ValueOf<T> = T[keyof T];