随着如今技术的发展,复杂装备设计难度日渐增长,人们也提出了更多更复杂的设计需求。因此在这一领域,以基于模型的系统工程(MBSE)理论实践为基础的图形化系统工程建模软件的重要性就越来越明显。目前国外也有一些成熟的MBSE建模软件,但这一类大型工业建模软件不可避免的具有大软件的通病——臃肿。它们往往安装、更新复杂,配置繁琐,程序加载也十分耗时。而如今网络技术飞速发展,基于网页的建模平台也逐渐流行起来,但这些建模平台难以支撑复杂的建模操作。本文提出的M-Design便是一款结合两者优势的基于网页的MBSE建模平台,它兼具了网页建模平台轻量化的特点,并通过前后端展示和计算分离解决了一般网页建模平台难以支撑复杂建模计算的问题。在网页化MBSE建模领域,我们的研究成果具有一定的领先意义。为了实现M-Design的前后端展示与计算分离,我们创新性地提出了从前到后分别为前端展示层、前端模型适配层、后端模型层的三层架构模型。本文将主要关注系统的前端展示层的架构设计以及业务组织。本文的工作主要解决了图形元素是如何结合后端模型与前端图形控件功能的问题,并在此基础上进行图形交互设计。我们将分成图形元素的结构和行为两部分来介绍。我们根据OMG组织提出的标准结合M-Design的特点,自创了一套可结合模型语义并能支持图形交互的图形元素。还提出了资源池及特征化树结构以解决图形元素的逻辑语义化整体组织问题。文中通过图形元素的创建删除介绍了图形元素是如何与系统其它模块结合的,并介绍了图形元素的回滚和事务组织策略。最后文中还介绍了前端展示层前述以外的几大技术点,大致包括图形绘制渲染、图形交互、拖动优化与连线设计。目前M-Design已能支持基础的MBSE建模功能,并在建模方式上支持直接模型建模和图形建模两种方式,且两种建模方式可同时交叉使用。为支持上述功能,我们也做了一些其它工作,将在文中介绍。