diff --git a/biz/src/main/java/cn/icanci/loopstack/bic/biz/adapter/GraphAdapterService.java b/biz/src/main/java/cn/icanci/loopstack/bic/biz/adapter/GraphAdapterService.java
index 8998617c02e756a71d545c64b4685ca279f089d8..d8fb7b9014e38c2c8d59fcf5af98fe0295fa95dd 100644
--- a/biz/src/main/java/cn/icanci/loopstack/bic/biz/adapter/GraphAdapterService.java
+++ b/biz/src/main/java/cn/icanci/loopstack/bic/biz/adapter/GraphAdapterService.java
@@ -80,7 +80,7 @@ public class GraphAdapterService implements GraphAdapter {
 
     private Map<String, String> buildNodeMap(NodeVO node) {
         HashMap<String, String> nodeMap = Maps.newHashMap();
-        nodeMap.put("id", node.getUuid());
+        nodeMap.put("nodeId", node.getUuid());
         nodeMap.put("nodeName", node.getNodeName());
         return nodeMap;
     }
diff --git a/biz/src/main/java/cn/icanci/loopstack/bic/biz/cache/GraphRepository.java b/biz/src/main/java/cn/icanci/loopstack/bic/biz/cache/GraphRepository.java
index 63ee3d2957c42cdbad767df8acf4026a46b3a178..bc047e750cb4337f93dabff5327fe77d95e5d904 100644
--- a/biz/src/main/java/cn/icanci/loopstack/bic/biz/cache/GraphRepository.java
+++ b/biz/src/main/java/cn/icanci/loopstack/bic/biz/cache/GraphRepository.java
@@ -5,9 +5,8 @@ import java.util.Map;
 
 import javax.annotation.Resource;
 
-import org.springframework.beans.BeansException;
-import org.springframework.context.ApplicationContext;
-import org.springframework.context.ApplicationContextAware;
+import org.springframework.boot.ApplicationArguments;
+import org.springframework.boot.ApplicationRunner;
 import org.springframework.stereotype.Service;
 
 import com.google.common.collect.Maps;
@@ -22,7 +21,7 @@ import cn.icanci.loopstack.bic.graph.Graph;
  * @since 1.0 Created in 2023/09/20 23:59
  */
 @Service
-public final class GraphRepository implements ApplicationContextAware {
+public final class GraphRepository implements ApplicationRunner {
 
     @Resource
     private SnapshotService                   snapshotService;
@@ -30,7 +29,7 @@ public final class GraphRepository implements ApplicationContextAware {
     private static final Map<GraphKey, Graph> REPOSITORY = Maps.newConcurrentMap();
 
     @Override
-    public void setApplicationContext(ApplicationContext applicationContext) throws BeansException {
+    public void run(ApplicationArguments args) throws Exception {
         doGraphRepositoryReload();
     }
 
diff --git a/biz/src/main/java/cn/icanci/loopstack/bic/biz/dts/impl/NodeDtsServiceImpl.java b/biz/src/main/java/cn/icanci/loopstack/bic/biz/dts/impl/NodeDtsServiceImpl.java
index 056785273afcad9d3f6d33f38a263948ddc55908..73279c025f222de05bd54c6b0999a35d66f1a92f 100644
--- a/biz/src/main/java/cn/icanci/loopstack/bic/biz/dts/impl/NodeDtsServiceImpl.java
+++ b/biz/src/main/java/cn/icanci/loopstack/bic/biz/dts/impl/NodeDtsServiceImpl.java
@@ -6,11 +6,9 @@ import org.springframework.stereotype.Service;
 
 import cn.icanci.loopstack.bic.biz.dts.DTS;
 import cn.icanci.loopstack.bic.biz.dts.GraphDtsService;
-import cn.icanci.loopstack.bic.biz.service.NodeStyleService;
 import cn.icanci.loopstack.bic.biz.service.NodeVueService;
 import cn.icanci.loopstack.bic.biz.utils.TemplateFileUtils;
 import cn.icanci.loopstack.bic.common.enums.NodeVueTypeEnum;
-import cn.icanci.loopstack.bic.common.model.base.NodeStyleVO;
 import cn.icanci.loopstack.bic.common.model.base.NodeVO;
 import cn.icanci.loopstack.bic.common.model.base.NodeVueVO;
 
@@ -25,27 +23,14 @@ public class NodeDtsServiceImpl implements GraphDtsService<NodeVO> {
     private static final String DEFAULT_KEY            = "DEFAULT_KEY";
     private static final String DEFAULT_PLUGIN_CONTEXT = "{}";
     @Resource
-    private NodeStyleService    nodeStyleService;
-    @Resource
     private NodeVueService      nodeVueService;
 
     @Override
     public void dtsUnitViewTree(NodeVO node) {
-        // 插入样式信息
-        nodeStyleService.save(buildNodeStyle(node));
         // 插入组件信息
         nodeVueService.save(buildNodeVue(node));
     }
 
-    private NodeStyleVO buildNodeStyle(NodeVO node) {
-        NodeStyleVO nodeStyle = new NodeStyleVO();
-        nodeStyle.setSystemUuid(node.getSystemUuid());
-        nodeStyle.setNodeStyleName(DEFAULT_NAME);
-        nodeStyle.setNodeStyleKey(DEFAULT_KEY);
-        nodeStyle.setNodeStyle(TemplateFileUtils.queryDefaultNodeStyleTemplate());
-        return nodeStyle;
-    }
-
     private NodeVueVO buildNodeVue(NodeVO node) {
         NodeVueVO nodeVue = new NodeVueVO();
         nodeVue.setSystemUuid(node.getSystemUuid());
diff --git a/biz/src/main/java/cn/icanci/loopstack/bic/biz/dts/impl/SystemDtsServiceImpl.java b/biz/src/main/java/cn/icanci/loopstack/bic/biz/dts/impl/SystemDtsServiceImpl.java
index b4d01401a55c61eefa48be482c5b866ecdda9e36..f0d53674f03e3717a6c23a121f9f6838b2f6e156 100644
--- a/biz/src/main/java/cn/icanci/loopstack/bic/biz/dts/impl/SystemDtsServiceImpl.java
+++ b/biz/src/main/java/cn/icanci/loopstack/bic/biz/dts/impl/SystemDtsServiceImpl.java
@@ -7,8 +7,10 @@ import org.springframework.stereotype.Service;
 import cn.icanci.loopstack.bic.biz.dts.DTS;
 import cn.icanci.loopstack.bic.biz.dts.GraphDtsService;
 import cn.icanci.loopstack.bic.biz.service.EdgeStyleService;
+import cn.icanci.loopstack.bic.biz.service.NodeStyleService;
 import cn.icanci.loopstack.bic.biz.utils.TemplateFileUtils;
 import cn.icanci.loopstack.bic.common.model.base.EdgeStyleVO;
+import cn.icanci.loopstack.bic.common.model.base.NodeStyleVO;
 import cn.icanci.loopstack.bic.common.model.base.SystemVO;
 
 /**
@@ -20,12 +22,18 @@ import cn.icanci.loopstack.bic.common.model.base.SystemVO;
 public class SystemDtsServiceImpl implements GraphDtsService<SystemVO> {
     @Resource
     private EdgeStyleService    edgeStyleService;
+    @Resource
+    private NodeStyleService    nodeStyleService;
+
     private static final String DEFAULT_NAME = "系统默认";
     private static final String DEFAULT_KEY  = "DEFAULT_KEY";
 
     @Override
     public void dtsUnitViewTree(SystemVO system) {
+        // 插入默认边样式
         edgeStyleService.save(buildEdge(system));
+        // 插入默认节点样式
+        nodeStyleService.save(buildNodeStyle(system.getUuid()));
     }
 
     private EdgeStyleVO buildEdge(SystemVO system) {
@@ -36,4 +44,13 @@ public class SystemDtsServiceImpl implements GraphDtsService<SystemVO> {
         edge.setEdgeStyle(TemplateFileUtils.queryDefaultEdgeStyleTemplate());
         return edge;
     }
+
+    private NodeStyleVO buildNodeStyle(String systemUuid) {
+        NodeStyleVO nodeStyle = new NodeStyleVO();
+        nodeStyle.setSystemUuid(systemUuid);
+        nodeStyle.setNodeStyleName(DEFAULT_NAME);
+        nodeStyle.setNodeStyleKey(DEFAULT_KEY);
+        nodeStyle.setNodeStyle(TemplateFileUtils.queryDefaultNodeStyleTemplate());
+        return nodeStyle;
+    }
 }
diff --git a/biz/src/main/java/cn/icanci/loopstack/bic/biz/dts/impl/UnitViewTreeGraphDtsServiceImpl.java b/biz/src/main/java/cn/icanci/loopstack/bic/biz/dts/impl/UnitViewTreeGraphDtsServiceImpl.java
index 0fea34697258735bc888accf3cb6b9b6031d4113..8af00546ed25d996331e814d62259a4ee736b749 100644
--- a/biz/src/main/java/cn/icanci/loopstack/bic/biz/dts/impl/UnitViewTreeGraphDtsServiceImpl.java
+++ b/biz/src/main/java/cn/icanci/loopstack/bic/biz/dts/impl/UnitViewTreeGraphDtsServiceImpl.java
@@ -79,7 +79,7 @@ public class UnitViewTreeGraphDtsServiceImpl implements GraphDtsService<UnitView
      */
     private Pair<List<UnitEdgeVO>, List<UnitNodeVO>> adapter2Pair(List<UnitViewTreeRelationVO> relationModel) {
         List<NodeVueVO> nodeVueList = nodeVueService.queryAll();
-        Map<String, NodeVueVO> nodeVueMap = nodeVueList.stream().collect(Collectors.toMap(NodeVueVO::getUuid, nodeVueVO -> nodeVueVO));
+        Map<String, NodeVueVO> nodeVueMap = nodeVueList.stream().collect(Collectors.toMap(NodeVueVO::getNodeUuid, nodeVueVO -> nodeVueVO));
         List<UnitEdgeVO> edges = Lists.newArrayList();
         Set<UnitNodeVO> nodes = Sets.newHashSet();
 
diff --git a/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/SystemService.java b/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/SystemService.java
index 5491e238c7aa61de0ae981cd6e0393f07554817a..b74df15b22788edfb782374b7818b4f3fa4e155b 100644
--- a/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/SystemService.java
+++ b/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/SystemService.java
@@ -29,4 +29,6 @@ public interface SystemService extends BaseService<SystemVO> {
     SystemVO queryByName(String name);
 
     SystemVO queryByKey(String key);
+
+    SystemVO queryByUuid(String systemUuid);
 }
diff --git a/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/UseCaseService.java b/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/UseCaseService.java
index af27b46adc9d4f432716c7571de7d4b463cc1c13..9f2f773736e1ecd2aeb86dabc443b6137d418292 100644
--- a/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/UseCaseService.java
+++ b/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/UseCaseService.java
@@ -30,4 +30,6 @@ public interface UseCaseService extends BaseService<UseCaseVO> {
     List<TextValue> loadSelector(String systemUuid);
 
     List<TextValue> loadAllSelector();
+
+    UseCaseVO queryBySystemAndUseCase(String systemUuid, String useCaseUuid);
 }
diff --git a/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/impl/BuryingServiceImpl.java b/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/impl/BuryingServiceImpl.java
index 64f4e122e1fa28f80050c7bb0ada06187722ce6d..81c76b4f01fd9ca9b7d82bacbe339dea33f8e31e 100644
--- a/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/impl/BuryingServiceImpl.java
+++ b/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/impl/BuryingServiceImpl.java
@@ -10,7 +10,11 @@ import org.springframework.stereotype.Service;
 
 import cn.icanci.loopstack.bic.biz.mapper.BuryingMapper;
 import cn.icanci.loopstack.bic.biz.service.BuryingService;
+import cn.icanci.loopstack.bic.biz.service.SystemService;
+import cn.icanci.loopstack.bic.biz.service.UseCaseService;
 import cn.icanci.loopstack.bic.common.model.BuryingVO;
+import cn.icanci.loopstack.bic.common.model.base.SystemVO;
+import cn.icanci.loopstack.bic.common.model.base.UseCaseVO;
 import cn.icanci.loopstack.bic.dal.mongo.common.PageList;
 import cn.icanci.loopstack.bic.dal.mongo.daointerface.BuryingDAO;
 import cn.icanci.loopstack.bic.dal.mongo.dateobject.BuryingDO;
@@ -22,9 +26,13 @@ import cn.icanci.loopstack.bic.dal.mongo.dateobject.BuryingDO;
 @Service
 public class BuryingServiceImpl implements BuryingService {
     @Resource
-    private BuryingDAO    buryingDAO;
+    private BuryingDAO     buryingDAO;
     @Resource
-    private BuryingMapper buryingMapper;
+    private BuryingMapper  buryingMapper;
+    @Resource
+    private SystemService  systemService;
+    @Resource
+    private UseCaseService useCaseService;
 
     @Override
     public void batchInsert(List<BuryingVO> buryingList) {
@@ -56,7 +64,10 @@ public class BuryingServiceImpl implements BuryingService {
 
     @Override
     public List<BuryingVO> queryBySystemAndUseCase(String systemUuid, String useCaseUuid, String traceId, String orderSerialNo) {
-        return buryingMapper.dos2vos(buryingDAO.queryBySystemAndUseCase(systemUuid, useCaseUuid, traceId, orderSerialNo));
+        SystemVO systemVO = systemService.queryByUuid(systemUuid);
+        UseCaseVO useCaseVO = useCaseService.queryBySystemAndUseCase(systemUuid, useCaseUuid);
+
+        return buryingMapper.dos2vos(buryingDAO.queryBySystemAndUseCase(systemVO.getSystemKey(), useCaseVO.getUseCaseKey(), traceId, orderSerialNo));
     }
 
     private boolean doInsert(BuryingVO burying) {
diff --git a/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/impl/GraphServiceImpl.java b/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/impl/GraphServiceImpl.java
index d8e26f19366a2fca3138535bdb3f24cad2e6c071..ff795c80eb2a352bca0fa2ade6aa40ab1e7b098f 100644
--- a/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/impl/GraphServiceImpl.java
+++ b/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/impl/GraphServiceImpl.java
@@ -81,6 +81,19 @@ public class GraphServiceImpl implements GraphService {
                 edgeRelation.getSource().setPathPass(true);
             }
         }
+
+        for (UnitViewNode node : unitViewGraph.getNodes()) {
+            if (node.hasPathPass()) {
+                continue;
+            }
+            String text = node.getAttrs().getLabel().getText();
+            String noData = "(无数据)";
+
+            if (text.contains(noData)) {
+                continue;
+            }
+            node.getAttrs().getLabel().setText(text + noData);
+        }
     }
 
     private List<GraphBurying> buildBuryings(NodeDataModeEnum nodeDataMode, String nodeDataKey, Map<String, List<GraphBurying>> uniqueKeyMap) {
diff --git a/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/impl/NodeServiceImpl.java b/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/impl/NodeServiceImpl.java
index 3bed976217d376393fbddaccc10b1fee35cc04a2..d7166590af4447069d1d0f8797fe6306a140bfdc 100644
--- a/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/impl/NodeServiceImpl.java
+++ b/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/impl/NodeServiceImpl.java
@@ -44,7 +44,7 @@ public class NodeServiceImpl implements NodeService {
         if (doInsert(nodeVO)) {
             NodeDO insert = nodeMapper.vo2do(nodeVO);
             nodeDAO.insert(insert);
-            graphDtsServiceProxy.dtsUnitViewTree(nodeVO);
+             graphDtsServiceProxy.dtsUnitViewTree(nodeMapper.do2vo(insert));
         } else {
             nodeDAO.update(nodeMapper.vo2do(nodeVO));
         }
diff --git a/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/impl/SnapshotServiceImpl.java b/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/impl/SnapshotServiceImpl.java
index 2de5c7bad2432b846b62d619a800361bea3803e9..fee02365f79b2f10f146681edbf3db33b2a1774a 100644
--- a/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/impl/SnapshotServiceImpl.java
+++ b/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/impl/SnapshotServiceImpl.java
@@ -6,6 +6,7 @@ import java.util.List;
 import javax.annotation.Resource;
 
 import org.apache.commons.collections4.CollectionUtils;
+import org.springframework.core.annotation.Order;
 import org.springframework.stereotype.Service;
 
 import com.google.common.collect.Lists;
@@ -25,6 +26,7 @@ import cn.icanci.loopstack.bic.graph.Graph;
  * @author icanci
  * @since 1.0 Created in 2023/09/21 00:09
  */
+@Order(1)
 @Service
 public class SnapshotServiceImpl implements SnapshotService {
     @Resource
diff --git a/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/impl/SystemServiceImpl.java b/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/impl/SystemServiceImpl.java
index 76770f45190c12e40557047ee162f3d6bef80d26..a427ec9c345b4ab6484a79984e59ba82570bc750 100644
--- a/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/impl/SystemServiceImpl.java
+++ b/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/impl/SystemServiceImpl.java
@@ -42,7 +42,7 @@ public class SystemServiceImpl implements SystemService {
         if (doInsert(systemVO)) {
             SystemDO insert = systemMapper.vo2do(systemVO);
             systemDAO.insert(insert);
-            graphDtsServiceProxy.dtsUnitViewTree(systemVO);
+            graphDtsServiceProxy.dtsUnitViewTree(systemMapper.do2vo(insert));
         } else {
             systemDAO.update(systemMapper.vo2do(systemVO));
         }
@@ -85,4 +85,9 @@ public class SystemServiceImpl implements SystemService {
     public SystemVO queryByKey(String key) {
         return systemMapper.do2vo(systemDAO.queryByKey(key));
     }
+
+    @Override
+    public SystemVO queryByUuid(String systemUuid) {
+        return systemMapper.do2vo(systemDAO.queryByUuid(systemUuid));
+    }
 }
diff --git a/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/impl/UnitViewTreeServiceImpl.java b/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/impl/UnitViewTreeServiceImpl.java
index 46d65d276f7fac342676e4883f18dac7a59623c3..34b8368feba5bd27d578414ed28d30b684ba5879 100644
--- a/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/impl/UnitViewTreeServiceImpl.java
+++ b/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/impl/UnitViewTreeServiceImpl.java
@@ -39,6 +39,7 @@ public class UnitViewTreeServiceImpl implements UnitViewTreeService {
         if (doInsert(unitViewTreeVO)) {
             UnitViewTreeDO insert = unitViewTreeMapper.vo2do(unitViewTreeVO);
             unitViewTreeDAO.insert(insert);
+            unitViewTreeVO = unitViewTreeMapper.do2vo(insert);
         } else {
             unitViewTreeDAO.update(unitViewTreeMapper.vo2do(unitViewTreeVO));
         }
diff --git a/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/impl/UseCaseServiceImpl.java b/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/impl/UseCaseServiceImpl.java
index f02a7a2ea39be6e53ac2973bf453cc1dcb3ca2b6..be0e7e38063567dd5c9453433ed741888697b367 100644
--- a/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/impl/UseCaseServiceImpl.java
+++ b/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/impl/UseCaseServiceImpl.java
@@ -105,4 +105,9 @@ public class UseCaseServiceImpl implements UseCaseService {
         }
         return textValues;
     }
+
+    @Override
+    public UseCaseVO queryBySystemAndUseCase(String systemUuid, String useCaseUuid) {
+        return useCaseMapper.do2vo(useCaseDAO.queryBySystemAndUseCase(systemUuid, useCaseUuid));
+    }
 }
diff --git a/dal/src/main/java/cn/icanci/loopstack/bic/dal/mongo/daointerface/BuryingDAO.java b/dal/src/main/java/cn/icanci/loopstack/bic/dal/mongo/daointerface/BuryingDAO.java
index b797f425411f2dc9354eff825d8e1d4f49a7e367..7ad93aeb92846deeea995ed0d7fbb0b1cd98f4e1 100644
--- a/dal/src/main/java/cn/icanci/loopstack/bic/dal/mongo/daointerface/BuryingDAO.java
+++ b/dal/src/main/java/cn/icanci/loopstack/bic/dal/mongo/daointerface/BuryingDAO.java
@@ -21,7 +21,7 @@ public interface BuryingDAO extends BaseDAO<BuryingDO> {
      */
     void batchInsert(List<BuryingDO> buryingList);
 
-    List<BuryingDO> queryBySystemAndUseCase(String systemUuid, String useCaseUuid, String traceId, String orderSerialNo);
+    List<BuryingDO> queryBySystemAndUseCase(String systemUuid, String useCaseKey, String traceId, String orderSerialNo);
 
     /** 列 */
     interface BuryingColumn extends BaseColumn {
diff --git a/dal/src/main/java/cn/icanci/loopstack/bic/dal/mongo/daointerface/SystemDAO.java b/dal/src/main/java/cn/icanci/loopstack/bic/dal/mongo/daointerface/SystemDAO.java
index 7f695cb47a690e55b6ca0694bc7355cb6951c93c..63cbc89d2d35c21ca71a8faaa2b7bc0ebd2d226d 100644
--- a/dal/src/main/java/cn/icanci/loopstack/bic/dal/mongo/daointerface/SystemDAO.java
+++ b/dal/src/main/java/cn/icanci/loopstack/bic/dal/mongo/daointerface/SystemDAO.java
@@ -16,6 +16,8 @@ public interface SystemDAO extends BaseDAO<SystemDO> {
 
     SystemDO queryByKey(String key);
 
+    SystemDO queryByUuid(String systemUuid);
+
     /** 列 */
     interface SystemColumn extends BaseColumn {
         String SYSTEM_NAME = "systemName";
diff --git a/dal/src/main/java/cn/icanci/loopstack/bic/dal/mongo/daointerface/UseCaseDAO.java b/dal/src/main/java/cn/icanci/loopstack/bic/dal/mongo/daointerface/UseCaseDAO.java
index 65af43cd3f68e654c84c6df2a7234ea81954a5e1..3daf30fd5d56df924af98ca381c3cf39f80183ee 100644
--- a/dal/src/main/java/cn/icanci/loopstack/bic/dal/mongo/daointerface/UseCaseDAO.java
+++ b/dal/src/main/java/cn/icanci/loopstack/bic/dal/mongo/daointerface/UseCaseDAO.java
@@ -16,6 +16,8 @@ public interface UseCaseDAO extends BaseDAO<UseCaseDO> {
 
     UseCaseDO queryBySystemUuidAndKey(String systemUuid, String key);
 
+    UseCaseDO queryBySystemAndUseCase(String systemUuid, String useCaseUuid);
+
     /** 列 */
     interface UseCaseColumn extends BaseColumn {
         String USE_CASE_NAME = "useCaseName";
diff --git a/dal/src/main/java/cn/icanci/loopstack/bic/dal/mongo/mongo/MongoBuryingDAO.java b/dal/src/main/java/cn/icanci/loopstack/bic/dal/mongo/mongo/MongoBuryingDAO.java
index 125d39962355d7fe00858be29cde80f6055f11f9..e34b58f0555ad48aafe3fdfe6ac5173d4991161b 100644
--- a/dal/src/main/java/cn/icanci/loopstack/bic/dal/mongo/mongo/MongoBuryingDAO.java
+++ b/dal/src/main/java/cn/icanci/loopstack/bic/dal/mongo/mongo/MongoBuryingDAO.java
@@ -101,10 +101,10 @@ public class MongoBuryingDAO extends AbstractBaseDAO<BuryingDO> implements Buryi
     }
 
     @Override
-    public List<BuryingDO> queryBySystemAndUseCase(String systemUuid, String useCaseUuid, String traceId, String orderSerialNo) {
+    public List<BuryingDO> queryBySystemAndUseCase(String systemUuid, String useCaseKey, String traceId, String orderSerialNo) {
         Criteria criteria = Criteria.where(BuryingColumn.ENV).is(DEFAULT_ENV);
         criteria.and(BuryingColumn.SYSTEM_KEY).is(systemUuid);
-        criteria.and(BuryingColumn.USE_CASE).is(useCaseUuid);
+        criteria.and(BuryingColumn.USE_CASE).is(useCaseKey);
         if (StringUtils.isNotBlank(traceId)) {
             criteria.and(BuryingColumn.TRACE_ID).is(traceId);
         }
diff --git a/dal/src/main/java/cn/icanci/loopstack/bic/dal/mongo/mongo/MongoSystemDAO.java b/dal/src/main/java/cn/icanci/loopstack/bic/dal/mongo/mongo/MongoSystemDAO.java
index 93ec9fc80e6206e6c9cd2c8c8df4d8c3ac0fa786..41d53e931b682f7d5636a6e0818dd91ae5b90e7f 100644
--- a/dal/src/main/java/cn/icanci/loopstack/bic/dal/mongo/mongo/MongoSystemDAO.java
+++ b/dal/src/main/java/cn/icanci/loopstack/bic/dal/mongo/mongo/MongoSystemDAO.java
@@ -81,4 +81,11 @@ public class MongoSystemDAO extends AbstractBaseDAO<SystemDO> implements SystemD
         Query query = new Query(criteria);
         return mongoTemplate.findOne(query, COLLECTION_CLASS, COLLECTION_NAME);
     }
+
+    @Override public SystemDO queryByUuid(String systemUuid) {
+        Criteria criteria = Criteria.where(SystemColumn.UUID).is(systemUuid);
+        criteria.and(SystemColumn.ENV).is(DEFAULT_ENV);
+        Query query = new Query(criteria);
+        return mongoTemplate.findOne(query, COLLECTION_CLASS, COLLECTION_NAME);
+    }
 }
diff --git a/dal/src/main/java/cn/icanci/loopstack/bic/dal/mongo/mongo/MongoUseCaseDAO.java b/dal/src/main/java/cn/icanci/loopstack/bic/dal/mongo/mongo/MongoUseCaseDAO.java
index c507735e51afdf9cb05fe43c39a9e4bcb51ebd8d..dc2ba938dd20b11543a28eeffd6b3c47940cd6f8 100644
--- a/dal/src/main/java/cn/icanci/loopstack/bic/dal/mongo/mongo/MongoUseCaseDAO.java
+++ b/dal/src/main/java/cn/icanci/loopstack/bic/dal/mongo/mongo/MongoUseCaseDAO.java
@@ -86,4 +86,12 @@ public class MongoUseCaseDAO extends AbstractBaseDAO<UseCaseDO> implements UseCa
         Query query = new Query(criteria);
         return mongoTemplate.findOne(query, COLLECTION_CLASS, COLLECTION_NAME);
     }
+
+    @Override public UseCaseDO queryBySystemAndUseCase(String systemUuid, String useCaseUuid) {
+        Criteria criteria = Criteria.where(UseCaseColumn.UUID).is(useCaseUuid);
+        criteria.and(UseCaseColumn.ENV).is(DEFAULT_ENV);
+        criteria.and(UseCaseColumn.SYSTEM_UUID).is(systemUuid);
+        Query query = new Query(criteria);
+        return mongoTemplate.findOne(query, COLLECTION_CLASS, COLLECTION_NAME);
+    }
 }
diff --git a/views/src/main/resources/vueboot/src/api/graph.js b/views/src/main/resources/vueboot/src/api/graph.js
new file mode 100644
index 0000000000000000000000000000000000000000..e27f96cd99715182d8ec94a3adf3dec939990021
--- /dev/null
+++ b/views/src/main/resources/vueboot/src/api/graph.js
@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export async function graphQuery(graph) {
+  return await request({
+    url: '/bicAdmin/graph/load',
+    method: 'post',
+    data: graph
+  })
+}
diff --git a/views/src/main/resources/vueboot/src/router/index.js b/views/src/main/resources/vueboot/src/router/index.js
index acda0c87a9f03b48014995f3639cfa794fe3f068..50246a0cf68c4fbadb9466097f864d07da9aa1a4 100644
--- a/views/src/main/resources/vueboot/src/router/index.js
+++ b/views/src/main/resources/vueboot/src/router/index.js
@@ -220,12 +220,12 @@ export const constantRoutes = [
         name: 'bicSummaryView',
         meta: {title: '聚合视图'}
       },
-      {
-        path: 'demo-view',
-        component: () => import('@/views/bic-view/demo-view'),
-        name: 'demoView',
-        meta: {title: 'demoView'}
-      },
+      // {
+      //   path: 'demo-view',
+      //   component: () => import('@/views/bic-view/demo-view'),
+      //   name: 'demoView',
+      //   meta: {title: 'demoView'}
+      // },
     ]
   },
   {
diff --git a/views/src/main/resources/vueboot/src/views/bic-view/bic-singleton-view.vue b/views/src/main/resources/vueboot/src/views/bic-view/bic-singleton-view.vue
index 2b7f3160bb311a1674710ce8eef0ce6480f8906d..86db109f803c8351eeb0e3d3634074e5f160b29c 100644
--- a/views/src/main/resources/vueboot/src/views/bic-view/bic-singleton-view.vue
+++ b/views/src/main/resources/vueboot/src/views/bic-view/bic-singleton-view.vue
@@ -1,20 +1,314 @@
 <template>
-  <div class="app-container">
-    <aside>
-      <span class="red-text-css">单例视图</span>
-    </aside>
+  <div style="width:100%; height:100%;">
+    <el-card class="box-card">
+      <el-form
+        :inline="true"
+        :rules="rules"
+        ref="ruleForm"
+        :model="queryForm"
+        class="demo-form-inline">
+        <el-form-item prop="systemUuid" label="系统">
+          <el-select clearable
+                     filterable
+                     v-model="queryForm.systemUuid"
+                     @change="refreshUseCaseOptions"
+                     placeholder="请选择系统">
+            <el-option
+              v-for="item in systemOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item prop="useCaseUuid" label="用例">
+          <el-select :disabled="queryForm.systemUuid === ''"
+                     clearable filterable v-model="queryForm.useCaseUuid" placeholder="请选择用例">
+            <el-option
+              v-for="item in useCaseOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="TraceId">
+          <el-input v-model="queryForm.traceId" placeholder="精准查询"></el-input>
+        </el-form-item>
+        <el-form-item label="bizNo">
+          <el-input v-model="queryForm.orderSerialNo" placeholder="精准查询"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="query">查询</el-button>
+        </el-form-item>
+      </el-form>
+
+      <div style="width:100%; height:100%;" id="container"></div>
+    </el-card>
+
+    <el-dialog
+      title="获取搜索缓存"
+      append-to-body
+      :visible.sync="dialogTableVisible">
+      缓存信息：Xxx
+    </el-dialog>
+
+    <el-dialog
+      title="TODO 名字"
+      :visible.sync="dialogVisible"
+      :close-on-press-escape="false"
+      :close-on-click-modal="false"
+      append-to-body
+      width="80%"
+      :before-close="clearForm">
+
+      <div id="app">
+        <vuep class="hide-code" :template="vueCode" :scope="this"></vuep>
+      </div>
+
+      <span slot="footer" class="dialog-footer">
+    <el-button @click="clearForm">取 消</el-button>
+  </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import {systemSelector, useCaseSelector} from "@/api/loadSelectorApi";
+import {graphQuery} from "@/api/graph";
+import {Graph} from "@antv/x6";
+import {Snapline} from "@antv/x6-plugin-snapline";
+import {Selection} from "@antv/x6-plugin-selection";
+import {Scroller} from "@antv/x6-plugin-scroller";
+import {DagreLayout} from "@antv/layout";
+
 export default {
-  name: "bic-singleton-view"
+  name: "bic-singleton-view",
+  data() {
+    return {
+      dialogVisible: false,
+      dialogTableVisible: false,
+      vueCode: '',
+      pluginContext: {},
+      queryForm: {
+        systemUuid: '',
+        useCaseUuid: '',
+        traceId: '',
+        orderSerialNo: ''
+      },
+      systemOptions: [],
+      useCaseOptions: [],
+      rules: {
+        systemUuid: [
+          {required: true, message: '此项必填', trigger: 'change'}
+        ],
+        useCaseUuid: [
+          {required: true, message: '此项必填', trigger: 'change'},
+        ],
+      },
+      currentGraphData: {},
+      graphHolder: undefined
+    }
+  },
+  async created() {
+    let vm = this
+    vm.systemOptions = await systemSelector()
+  },
+  methods: {
+    async query() {
+      let vm = this
+      vm.$refs['ruleForm'].validate(async (valid) => {
+        if (valid) {
+          let loading = vm.loading();
+          let ret = await graphQuery(vm.queryForm)
+          if (ret.ok) {
+            vm.currentGraph = ret.data.graph
+            vm.doRefresh()
+          } else {
+            vm.$message({type: 'error', message: '查询失败：' + ret.message});
+          }
+          loading.close()
+        }
+      })
+    },
+    clearForm() {
+      let vm = this
+      vm.dialogVisible = false
+      vm.vueCode = ''
+      vm.pluginContext = {}
+    },
+    async refreshUseCaseOptions() {
+      let vm = this
+      if (vm.queryForm.systemUuid === '') {
+        vm.useCaseOptions = []
+      } else {
+        vm.useCaseOptions = await useCaseSelector(vm.queryForm.systemUuid)
+      }
+    },
+    doRefresh() {
+      let vm = this
+      let graph = undefined
+      if (vm.graphHolder !== undefined) {
+        vm.graphHolder.dispose()
+      }
+      graph = vm.newOneGraph();
+      vm.graphHolder = graph
+
+      const data = {
+        nodes: vm.currentGraph.nodes,
+        edges: vm.currentGraph.edges
+      }
+
+      graph.fromJSON(data)
+
+      // https://x6.antv.antgroup.com/tutorial/basic/events
+      // graph.addNode({})
+      // graph.addNodes(demoViewNodeData)
+      // graph.centerContent()
+
+      // graph.on('node:click', ({e, x, y, node, view}) => {
+      //   console.log(e)
+      //   console.log(x)
+      //   console.log(y)
+      //   console.log(node)
+      //   console.log(view)
+      // })
+      //
+      // graph.on('node:mouseenter', ({e, node, view}) => {
+      //   alert("eeee")
+      // })
+      // graph.on('cell:click', ({ e, x, y, cell, view }) => {})
+      //   graph.on('node:click', ({ e, x, y, node, view }) => {})
+      //   graph.on('edge:click', ({ e, x, y, edge, view }) => {})
+      //   graph.on('blank:click', ({ e, x, y }) => {})
+      //
+      //   graph.on('cell:mouseenter', ({ e, cell, view }) => {})
+      //   graph.on('node:mouseenter', ({ e, node, view }) => {})
+      //   graph.on('edge:mouseenter', ({ e, edge, view }) => {})
+      //   graph.on('graph:mouseenter', ({ e }) => {})
+
+      graph.on('edge:mouseenter', ({e, edge, view}) => {
+        debugger
+        console.log(e)
+        console.log(edge)
+        console.log(view)
+        // edge.store.data.historyInfo.attrs = edge.getAttrs()
+        // edge.store.data.historyInfo.labels = edge.getLabels()
+        //
+        // let tempData = edge.store.data;
+        // let hover = tempData.extendFunc.hover;
+        // hover 的标准反参，可选配置
+
+        // edge.setAttrs(tempData.consumerInfo.attrs)
+        // edge.setLabels(tempData.consumerInfo.labels)
+      })
+
+      graph.on('edge:mouseleave', ({e, edge, view}) => {
+        // edge.setAttrs(edge.store.data.historyInfo.attrs)
+        // edge.setLabels(edge.store.data.historyInfo.labels)
+      })
+
+
+      graph.on('edge:click', ({e, x, y, edge, view}) => {
+        vm.dialogTableVisible = true
+      })
+
+      graph.use(
+        new Snapline({
+          enabled: true,
+          clean: false,
+        }),
+      )
+
+      graph.use(
+        new Selection({
+          enabled: true,
+          multiple: true,
+          rubberband: true,
+          movable: true,
+          showNodeSelectionBox: true,
+        }),
+      )
+
+      graph.use(
+        new Scroller({
+          enabled: true,
+          pannable: true,
+          padding: 20
+        }),
+      )
+
+      // https://x6.antv.antgroup.com/temp/layout#dagre
+      const dagreLayout = new DagreLayout({
+        type: 'dagre',
+        rankdir: 'LR',
+        align: undefined,
+        ranksep: 50,
+        nodesep: 15,
+        controlPoints: true,
+        preventOverlap: true
+      })
+
+      const newModel = dagreLayout.layout(data)
+
+      graph.fromJSON(newModel)
+    },
+    newOneGraph() {
+      return new Graph({
+        container: document.getElementById('container'),
+        width: document.body.scrollWidth - 20,
+        height: document.body.scrollHeight - 90,
+        autoResize: false,
+        interacting: {
+          edgeLabelMovable: true,
+        },
+        grid: {
+          size: 10,
+          visible: true,
+          type: 'doubleMesh',
+          args: [
+            {
+              color: '#eee',
+              thickness: 1,
+            },
+            {
+              color: '#ddd',
+              thickness: 1,
+              factor: 4,
+            },
+          ],
+        },
+        background: {
+          color: '#ffffff',
+        },
+        connecting: {
+          allowBlank: true,
+        },
+        selecting: {
+          enabled: true,
+          className: 'node-selecting',
+          rubberband: true,
+          rubberNode: true,
+          movable: true
+        },
+        snapline: {
+          enabled: true,
+          sharp: true,
+        },
+        keyboard: {
+          enabled: true
+        },
+      })
+    }
+  }
 }
 </script>
 
 <style scoped>
-.red-text-css {
-  color: red;
-  font-weight: bolder;
+.vuep-editor .CodeMirror, .vuep-preview .CodeMirror, .vuep-error .CodeMirror {
+  display: none !important;
 }
+
+@import 'vuep.css';
+
 </style>
diff --git a/views/src/main/resources/vueboot/src/views/bic-view/bic-summary-view.vue b/views/src/main/resources/vueboot/src/views/bic-view/bic-summary-view.vue
index 2afd28058f6c6ee80c6941155abc94b578624cf7..773cb5c9381de1e50c02df834e2ea5336b8d82f2 100644
--- a/views/src/main/resources/vueboot/src/views/bic-view/bic-summary-view.vue
+++ b/views/src/main/resources/vueboot/src/views/bic-view/bic-summary-view.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
     <aside>
-      <span class="red-text-css">汇总视图</span>
+      <span class="red-text-css">聚合实体，聚合用例，功能迭代中~</span>
     </aside>
   </div>
 </template>
diff --git a/views/src/main/resources/vueboot/src/views/bic-view/vuep.css b/views/src/main/resources/vueboot/src/views/bic-view/vuep.css
new file mode 100644
index 0000000000000000000000000000000000000000..d5e3dba679b320cbdab9c499ef1c566e782e3267
--- /dev/null
+++ b/views/src/main/resources/vueboot/src/views/bic-view/vuep.css
@@ -0,0 +1,715 @@
+/* BASICS */
+.CodeMirror {
+  /* Set height, width, borders, and global font properties here */
+  font-family: monospace;
+  height: 300px;
+  color: black;
+}
+
+/* PADDING */
+.CodeMirror-lines {
+  padding: 4px 0;
+  /* Vertical padding around content */
+}
+
+.CodeMirror pre {
+  padding: 0 4px;
+  /* Horizontal padding of content */
+}
+
+.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
+  background-color: white;
+  /* The little square between H and V scrollbars */
+}
+
+/* GUTTER */
+.CodeMirror-gutters {
+  border-right: 1px solid #ddd;
+  background-color: #f7f7f7;
+  white-space: nowrap;
+}
+
+.CodeMirror-linenumbers {
+}
+
+.CodeMirror-linenumber {
+  padding: 0 3px 0 5px;
+  min-width: 20px;
+  text-align: right;
+  color: #999;
+  white-space: nowrap;
+}
+
+.CodeMirror-guttermarker {
+  color: black;
+}
+
+.CodeMirror-guttermarker-subtle {
+  color: #999;
+}
+
+/* CURSOR */
+.CodeMirror-cursor {
+  border-left: 1px solid black;
+  border-right: none;
+  width: 0;
+}
+
+/* Shown when moving in bi-directional text */
+.CodeMirror div.CodeMirror-secondarycursor {
+  border-left: 1px solid silver;
+}
+
+.cm-fat-cursor .CodeMirror-cursor {
+  width: auto;
+  border: 0 !important;
+  background: #7e7;
+}
+
+.cm-fat-cursor div.CodeMirror-cursors {
+  z-index: 1;
+}
+
+.cm-animate-fat-cursor {
+  width: auto;
+  border: 0;
+  -webkit-animation: blink 1.06s steps(1) infinite;
+  animation: blink 1.06s steps(1) infinite;
+  background-color: #7e7;
+}
+
+@-webkit-keyframes blink {
+  0% {
+  }
+  50% {
+    background-color: transparent;
+  }
+  100% {
+  }
+}
+
+@keyframes blink {
+  0% {
+  }
+  50% {
+    background-color: transparent;
+  }
+  100% {
+  }
+}
+
+/* Can style cursor different in overwrite (non-insert) mode */
+.CodeMirror-overwrite .CodeMirror-cursor {
+}
+
+.cm-tab {
+  display: inline-block;
+  text-decoration: inherit;
+}
+
+.CodeMirror-rulers {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: -50px;
+  bottom: -20px;
+  overflow: hidden;
+}
+
+.CodeMirror-ruler {
+  border-left: 1px solid #ccc;
+  top: 0;
+  bottom: 0;
+  position: absolute;
+}
+
+/* DEFAULT THEME */
+.cm-s-default .cm-header {
+  color: blue;
+}
+
+.cm-s-default .cm-quote {
+  color: #090;
+}
+
+.cm-negative {
+  color: #d44;
+}
+
+.cm-positive {
+  color: #292;
+}
+
+.cm-header, .cm-strong {
+  font-weight: 700;
+}
+
+.cm-em {
+  font-style: italic;
+}
+
+.cm-link {
+  text-decoration: underline;
+}
+
+.cm-strikethrough {
+  text-decoration: line-through;
+}
+
+.cm-s-default .cm-keyword {
+  color: #708;
+}
+
+.cm-s-default .cm-atom {
+  color: #219;
+}
+
+.cm-s-default .cm-number {
+  color: #164;
+}
+
+.cm-s-default .cm-def {
+  color: #00f;
+}
+
+.cm-s-default .cm-variable, .cm-s-default .cm-punctuation, .cm-s-default .cm-property, .cm-s-default .cm-operator {
+}
+
+.cm-s-default .cm-variable-2 {
+  color: #05a;
+}
+
+.cm-s-default .cm-variable-3 {
+  color: #085;
+}
+
+.cm-s-default .cm-comment {
+  color: #a50;
+}
+
+.cm-s-default .cm-string {
+  color: #a11;
+}
+
+.cm-s-default .cm-string-2 {
+  color: #f50;
+}
+
+.cm-s-default .cm-meta {
+  color: #555;
+}
+
+.cm-s-default .cm-qualifier {
+  color: #555;
+}
+
+.cm-s-default .cm-builtin {
+  color: #30a;
+}
+
+.cm-s-default .cm-bracket {
+  color: #997;
+}
+
+.cm-s-default .cm-tag {
+  color: #170;
+}
+
+.cm-s-default .cm-attribute {
+  color: #00c;
+}
+
+.cm-s-default .cm-hr {
+  color: #999;
+}
+
+.cm-s-default .cm-link {
+  color: #00c;
+}
+
+.cm-s-default .cm-error {
+  color: #f00;
+}
+
+.cm-invalidchar {
+  color: #f00;
+}
+
+.CodeMirror-composing {
+  border-bottom: 2px solid;
+}
+
+/* Default styles for common addons */
+div.CodeMirror span.CodeMirror-matchingbracket {
+  color: #0f0;
+}
+
+div.CodeMirror span.CodeMirror-nonmatchingbracket {
+  color: #f22;
+}
+
+.CodeMirror-matchingtag {
+  background: rgba(255, 150, 0, .3);
+}
+
+.CodeMirror-activeline-background {
+  background: #e8f2ff;
+}
+
+/* STOP */
+/* The rest of this file contains styles related to the mechanics of
+   the editor. You probably shouldn't touch them. */
+.CodeMirror {
+  position: relative;
+  overflow: hidden;
+  background: white;
+}
+
+.CodeMirror-scroll {
+  overflow: scroll !important;
+  /* Things will break if this is overridden */
+  /* 30px is the magic margin used to hide the element's real scrollbars */
+  /* See overflow: hidden in .CodeMirror */
+  margin-bottom: -30px;
+  margin-right: -30px;
+  padding-bottom: 30px;
+  height: 100%;
+  outline: none;
+  /* Prevent dragging from highlighting the element */
+  position: relative;
+}
+
+.CodeMirror-sizer {
+  position: relative;
+  border-right: 30px solid transparent;
+}
+
+/* The fake, visible scrollbars. Used to force redraw during scrolling
+   before actual scrolling happens, thus preventing shaking and
+   flickering artifacts. */
+.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
+  position: absolute;
+  z-index: 6;
+  display: none;
+}
+
+.CodeMirror-vscrollbar {
+  right: 0;
+  top: 0;
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+
+.CodeMirror-hscrollbar {
+  bottom: 0;
+  left: 0;
+  overflow-y: hidden;
+  overflow-x: scroll;
+}
+
+.CodeMirror-scrollbar-filler {
+  right: 0;
+  bottom: 0;
+}
+
+.CodeMirror-gutter-filler {
+  left: 0;
+  bottom: 0;
+}
+
+.CodeMirror-gutters {
+  position: absolute;
+  left: 0;
+  top: 0;
+  min-height: 100%;
+  z-index: 3;
+}
+
+.CodeMirror-gutter {
+  white-space: normal;
+  height: 100%;
+  display: inline-block;
+  vertical-align: top;
+  margin-bottom: -30px;
+}
+
+.CodeMirror-gutter-wrapper {
+  position: absolute;
+  z-index: 4;
+  background: none !important;
+  border: none !important;
+}
+
+.CodeMirror-gutter-background {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 4;
+}
+
+.CodeMirror-gutter-elt {
+  position: absolute;
+  cursor: default;
+  z-index: 4;
+}
+
+.CodeMirror-gutter-wrapper {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.CodeMirror-lines {
+  cursor: text;
+  min-height: 1px;
+  /* prevents collapsing before first draw */
+}
+
+.CodeMirror pre {
+  /* Reset some styles that the rest of the page might have set */
+  border-radius: 0;
+  border-width: 0;
+  background: transparent;
+  font-family: inherit;
+  font-size: inherit;
+  margin: 0;
+  white-space: pre;
+  word-wrap: normal;
+  line-height: inherit;
+  color: inherit;
+  z-index: 2;
+  position: relative;
+  overflow: visible;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-font-variant-ligatures: contextual;
+  font-variant-ligatures: contextual;
+}
+
+.CodeMirror-wrap pre {
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  word-break: normal;
+}
+
+.CodeMirror-linebackground {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 0;
+}
+
+.CodeMirror-linewidget {
+  position: relative;
+  z-index: 2;
+  overflow: auto;
+}
+
+.CodeMirror-widget {
+}
+
+.CodeMirror-code {
+  outline: none;
+}
+
+/* Force content-box sizing for the elements where we expect it */
+.CodeMirror-scroll, .CodeMirror-sizer, .CodeMirror-gutter, .CodeMirror-gutters, .CodeMirror-linenumber {
+  box-sizing: content-box;
+}
+
+.CodeMirror-measure {
+  position: absolute;
+  width: 100%;
+  height: 0;
+  overflow: hidden;
+  visibility: hidden;
+}
+
+.CodeMirror-cursor {
+  position: absolute;
+  pointer-events: none;
+}
+
+.CodeMirror-measure pre {
+  position: static;
+}
+
+div.CodeMirror-cursors {
+  visibility: hidden;
+  position: relative;
+  z-index: 3;
+}
+
+div.CodeMirror-dragcursors {
+  visibility: visible;
+}
+
+.CodeMirror-focused div.CodeMirror-cursors {
+  visibility: visible;
+}
+
+.CodeMirror-selected {
+  background: #d9d9d9;
+}
+
+.CodeMirror-focused .CodeMirror-selected {
+  background: #d7d4f0;
+}
+
+.CodeMirror-crosshair {
+  cursor: crosshair;
+}
+
+.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection {
+  background: #d7d4f0;
+}
+
+.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection {
+  background: #d7d4f0;
+}
+
+.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection {
+  background: #d7d4f0;
+}
+
+.cm-searching {
+  background: #ffa;
+  background: rgba(255, 255, 0, .4);
+}
+
+/* Used to force a border model for a node */
+.cm-force-border {
+  padding-right: .1px;
+}
+
+@media print {
+  /* Hide the cursor when printing */
+  .CodeMirror div.CodeMirror-cursors {
+    visibility: hidden;
+  }
+}
+
+/* See issue #2901 */
+.cm-tab-wrap-hack:after {
+  content: '';
+}
+
+/* Help users use markselection to safely style text background */
+span.CodeMirror-selectedtext {
+  background: none;
+}
+
+/*
+
+    Name:       material
+    Author:     Michael Kaminsky (http://github.com/mkaminsky11)
+
+    Original material color scheme by Mattia Astorino (https://github.com/equinusocio/material-theme)
+
+*/
+.cm-s-material.CodeMirror {
+  background-color: #263238;
+  color: rgba(233, 237, 237, 1);
+}
+
+.cm-s-material .CodeMirror-gutters {
+  background: #263238;
+  color: rgb(83, 127, 126);
+  border: none;
+}
+
+.cm-s-material .CodeMirror-guttermarker, .cm-s-material .CodeMirror-guttermarker-subtle, .cm-s-material .CodeMirror-linenumber {
+  color: rgb(83, 127, 126);
+}
+
+.cm-s-material .CodeMirror-cursor {
+  border-left: 1px solid #f8f8f0;
+}
+
+.cm-s-material div.CodeMirror-selected {
+  background: rgba(255, 255, 255, 0.15);
+}
+
+.cm-s-material.CodeMirror-focused div.CodeMirror-selected {
+  background: rgba(255, 255, 255, 0.10);
+}
+
+.cm-s-material .CodeMirror-line::-moz-selection, .cm-s-material .CodeMirror-line > span::-moz-selection, .cm-s-material .CodeMirror-line > span > span::-moz-selection {
+  background: rgba(255, 255, 255, 0.10);
+}
+
+.cm-s-material .CodeMirror-line::selection, .cm-s-material .CodeMirror-line > span::selection, .cm-s-material .CodeMirror-line > span > span::selection {
+  background: rgba(255, 255, 255, 0.10);
+}
+
+.cm-s-material .CodeMirror-line::-moz-selection, .cm-s-material .CodeMirror-line > span::-moz-selection, .cm-s-material .CodeMirror-line > span > span::-moz-selection {
+  background: rgba(255, 255, 255, 0.10);
+}
+
+.cm-s-material .CodeMirror-activeline-background {
+  background: rgba(0, 0, 0, 0);
+}
+
+.cm-s-material .cm-keyword {
+  color: rgba(199, 146, 234, 1);
+}
+
+.cm-s-material .cm-operator {
+  color: rgba(233, 237, 237, 1);
+}
+
+.cm-s-material .cm-variable-2 {
+  color: #80CBC4;
+}
+
+.cm-s-material .cm-variable-3 {
+  color: #82B1FF;
+}
+
+.cm-s-material .cm-builtin {
+  color: #DECB6B;
+}
+
+.cm-s-material .cm-atom {
+  color: #F77669;
+}
+
+.cm-s-material .cm-number {
+  color: #F77669;
+}
+
+.cm-s-material .cm-def {
+  color: rgba(233, 237, 237, 1);
+}
+
+.cm-s-material .cm-string {
+  color: #C3E88D;
+}
+
+.cm-s-material .cm-string-2 {
+  color: #80CBC4;
+}
+
+.cm-s-material .cm-comment {
+  color: #546E7A;
+}
+
+.cm-s-material .cm-variable {
+  color: #82B1FF;
+}
+
+.cm-s-material .cm-tag {
+  color: #80CBC4;
+}
+
+.cm-s-material .cm-meta {
+  color: #80CBC4;
+}
+
+.cm-s-material .cm-attribute {
+  color: #FFCB6B;
+}
+
+.cm-s-material .cm-property {
+  color: #80CBAE;
+}
+
+.cm-s-material .cm-qualifier {
+  color: #DECB6B;
+}
+
+.cm-s-material .cm-variable-3 {
+  color: #DECB6B;
+}
+
+.cm-s-material .cm-tag {
+  color: rgba(255, 83, 112, 1);
+}
+
+.cm-s-material .cm-error {
+  color: rgba(255, 255, 255, 1.0);
+  background-color: #EC5F67;
+}
+
+.cm-s-material .CodeMirror-matchingbracket {
+  text-decoration: underline;
+  color: white !important;
+}
+
+.vuep {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
+  height: 400px;
+}
+
+.vuep ::-webkit-scrollbar-track {
+  border-radius: 10px;
+  background-color: #F5F5F5;
+}
+
+.vuep ::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+  background-color: #F5F5F5;
+}
+
+.vuep ::-webkit-scrollbar-thumb {
+  border-radius: 8px;
+  background-color: #bbb;
+  -webkit-transition: all 0.5s;
+  transition: all 0.5s;
+}
+
+.vuep ::-webkit-scrollbar-thumb:hover {
+  border-radius: 8px;
+  background-color: #777;
+}
+
+.vuep-editor, .vuep-preview, .vuep-error {
+  border-radius: 2px;
+  height: inherit;
+  margin-right: 10px;
+  /*overflow: auto;*/
+  /*width: 50%;*/
+}
+
+.vuep-editor .CodeMirror, .vuep-preview .CodeMirror, .vuep-error .CodeMirror {
+  height: inherit;
+}
+
+.vuep-editor:last-child, .vuep-preview:last-child, .vuep-error:last-child {
+  margin-right: 0;
+}
+
+.vuep-editor {
+  line-height: 1.2em;
+}
+
+.vuep-error {
+  color: #f66;
+}
+
+.vuep-preview, .vuep-error {
+  border: 1px solid #eee;
+  box-sizing: border-box;
+  padding: 15px 25px;
+  width: 100%;
+  margin-left: -10px;
+}
+
+@media (max-width: 600px) {
+  .vuep {
+    display: block;
+    height: auto;
+  }
+
+  .vuep-editor, .vuep-preview, .vuep-error {
+    margin: 0 0 15px 0;
+    height: 400px;
+    width: 100%;
+  }
+}