graphical-abstract

name graphical-abstract description 学术论文摘要结构图(Graphical Abstract/TOC图)创建助手。支持多种工具：Python (matplotlib/PIL/drawsvg)、HTML/CSS/SVG、TikZ/LaTeX、Figma MCP、Banana Pro MCP、Plotly+Kaleido。集成2025-2026最新设计趋势（扁平化、Glassmorphism、等轴测、动画化）和无障碍设计指南。当用户需要：(1) 绘制论文摘要图/TOC图、(2) 创建研究流程示意图、(3) 设计期刊投稿用的图形摘要、(4) 制作学术海报的核心图示时触发。关键词：graphical abstract、摘要图、TOC图、流程图、示意图、机制图、架构图。 license Complete terms in LICENSE.txt 摘要结构图创建助手 创建高质量的学术论文图形摘要(Graphical Abstract)和目录图(TOC)。 工具选择指南 场景 推荐工具 优势 包含数据图表 Python matplotlib 数据与示意图无缝结合 矢量绘图 drawsvg 纯Python矢量，精确控制 复杂流程/架构 HTML/SVG 灵活布局，易于迭代 LaTeX论文配套 TikZ 风格统一，矢量输出 交互式/动画 Plotly + Kaleido 导出高质量静态图或HTML 精美设计稿 Figma MCP 专业设计，协作方便 快速原型 Banana Pro MCP AI辅助生成，速度快 期刊尺寸规范（2025-2026最新） # 常见期刊Graphical Abstract尺寸（更新版） JOURNAL_SIZES = { # 单位: pixels (300 DPI) 或 mm 'cell' : ( 1800 , 1200 ), # Cell系列: 1800x1200 px, 300 DPI 'nature' : ( 180 , 180 ), # Nature: 180x180 mm (正方形) 'science' : ( 900 , 600 ), # Science: 宽高比3:2 'elsevier' : ( 531 , 300 ), # Elsevier: 531x300 px (5x3 cm @300DPI) 'acs' : ( 3.25 , 1.75 ), # ACS: 3.25x1.75 inches 'jacs' : ( 3.25 , 1.75 ), # JACS: 同ACS规范 'wiley' : ( 500 , 250 ), # Wiley: 宽高比2:1 'rsc' : ( 560 , 280 ), # RSC: 8x4 cm @300DPI 'angew' : ( 180 , 90 ), # Angewandte Chemie: 180x90 mm 'advanced_materials' : ( 180 , 90 ), # Advanced Materials: 180x90 mm 'pnas' : ( 1500 , 600 ), # PNAS: 约1500x600 px 'lancet' : ( 1800 , 900 ), # The Lancet: 1800x900 px 'plos_one' : ( 2400 , 2400 ), # PLOS ONE: 最大2400x2400 px, 正方形 } # 通用尺寸 (inches) SIZES_INCH = { 'landscape' : ( 8 , 4 ), # 横向 2:1 'square' : ( 6 , 6 ), # 正方形 'wide' : ( 10 , 4 ), # 超宽 5:2 } 设计原则 视觉流向 : 左→右 或 上→下，符合阅读习惯 信息层次 : 3-5个关键步骤，不超过7个元素 色彩统一 : 使用2-3种主色，保持一致性 留白充足 : 元素间距 ≥ 元素尺寸的20% 字体清晰 : 最小字号12pt，Sans-serif字体 2025-2026 设计趋势 扁平化设计（Flat Design） # 扁平风格：无阴影、纯色块、清晰边界 FLAT_COLORS = { 'primary' : '#2196F3' , # Material Blue 'secondary' : '#4CAF50' , # Material Green 'accent' : '#FF5722' , # Material Deep Orange 'background' : '#FAFAFA' , # 近白背景 'text' : '#212121' , # 深灰文字 } flat_box_style = { 'boxstyle' : 'square,pad=0.1' , 'facecolor' : FLAT_COLORS[ 'primary' ], 'edgecolor' : 'none' , # 无边框 'linewidth' : 0 , } 渐变玻璃态效果（Glassmorphism） # Glassmorphism: 磨砂玻璃效果（适合HTML/SVG方案） GLASSMORPHISM_CSS = """ .glass-box { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 16px; box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2); } .glass-background { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } """ 等轴测视图（Isometric Style） # 等轴测投影参数 import numpy as np def isometric_transform ( x, y, z, scale= 1.0 ): """将3D坐标转换为等轴测2D坐标""" iso_x = (x - z) * np.cos(np.radians( 30 )) * scale iso_y = (x + z) * np.sin(np.radians( 30 )) * scale - y * scale return iso_x, iso_y def darken_color ( hex_color, factor= 0.8 ): """将十六进制颜色加深（用于等轴测图的侧面/底面） Args: hex_color: 十六进制颜色字符串，如 '#4A90D9' factor: 加深系数（0-1，越小越暗） """ r, g, b = bytes .fromhex(hex_color[ 1 :]) r2, g2, b2 = int (r * factor), int (g * factor), int (b * factor) return '#{:02x}{:02x}{:02x}' . format (r2, g2, b2) def draw_iso_box ( ax, x, y, z, width, height, depth, color= '#4A90D9' ): """绘制等轴测方块""" # 顶面 top_pts = np.array([ isometric_transform(x, y+height, z), isometric_transform(x+width, y+height, z), isometric_transform(x+width, y+height, z+depth), isometric_transform(x, y+height, z+depth), ]) # 正面、侧面（颜色深浅区分） from matplotlib.patches import Polygon top_color = color front_color = darken_color(color, 0.8 ) ax.add_patch(Polygon(top_pts, closed= True , facecolor=top_color, edgecolor= 'white' )) 动画化 Graphical Abstract（HTML方案） <!-- 支持CSS动画的摘要图（部分期刊接受HTML submission） --> < style > @keyframes flow-right { 0% { opacity : 0 ; transform : translateX (- 20px ); } 100% { opacity : 1 ; transform : translateX ( 0 ); } } .step { animation : flow-right 0.8s ease forwards; } .step :nth-child ( 1 ) { animation-delay : 0s ; } .step :nth-child ( 2 ) { animation-delay : 0.3s ; } .step :nth-child ( 3 ) { animation-delay : 0.6s ; } </ style > 工具一：drawsvg（Python矢量绘图） # 安装: pip install drawsvg import drawsvg as draw def create_svg_abstract ( width= 800 , height= 400 ): """使用drawsvg创建矢量摘要图""" d = draw.Drawing(width, height, origin= 'center' ) # 背景 d.append(draw.Rectangle(-width/ 2 , -height/ 2 , width, height, fill= 'white' )) # 渐变定义 gradient = draw.LinearGradient( 0 , 0 , 1 , 0 ) gradient.add_stop( 0 , '#4A90D9' ) gradient.add_stop( 1 , '#7B68EE' ) d.append(gradient) # 圆角矩形（步骤框） def add_step_box ( d, x, y, w, h, text, fill= None ): d.append(draw.Rectangle(x - w/ 2 , y - h/ 2 , w, h, fill=fill or gradient, rx= 10 , ry= 10 )) d.append(draw.Text(text, 14 , x, y, text_anchor= 'middle' , dominant_baseline= 'middle' , fill= 'white' , font_weight= 'bold' )) # 箭头 def add_arrow ( d, x1, y1, x2, y2 ): d.append(draw.Line(x1, y1, x2, y2, stroke= '#666' , stroke_width= 2 , marker_end=draw.Marker([- 2 , - 2 , 2 , 2 ], '0 0' , orient= 'auto' ))) add_step_box(d, - 250 , 0 , 140 , 60 , 'Input\nData' , '#E74C3C' ) add_arrow(d, - 175 , 0 , - 100 , 0 ) add_step_box(d, 0 , 0 , 140 , 60 , 'Processing\nModel' , '#3498DB' ) add_arrow(d, 75 , 0 , 150 , 0 ) add_step_box(d, 250 , 0 , 140 , 60 , 'Results\nOutput' , '#2ECC71' ) return d # 保存SVG abstract = create_svg_abstract() abstract.save_svg( 'graphical_abstract.svg' ) abstract.save_png( 'graphical_abstract.png' ) # 需要 cairo 工具二：Python方案 基础模板 import matplotlib.pyplot as plt import matplotlib.patches as patches from matplotlib.patches import FancyBboxPatch, FancyArrowPatch import numpy as np # 字体嵌入（投稿必需） plt.rcParams[ 'pdf.fonttype' ] = 42 plt.rcParams[ 'ps.fonttype' ] = 42 def create_graphical_abstract ( figsize=( 8 , 4 ), dpi= 300 ): """创建摘要图画布""" fig, ax = plt.subplots(figsize=figsize, dpi=dpi) ax.set_xlim( 0 , 10 ) ax.set_ylim( 0 , 5 ) ax.set_aspect( 'equal' ) ax.axis( 'off' ) return fig, ax def add_box ( ax, x, y, width, height, text, color= '#4A90D9' , text_color= 'white' ): """添加带文字的方框""" box = FancyBboxPatch((x, y), width, height, boxstyle= "round,pad=0.05,rounding_size=0.2" , facecolor=color, edgecolor= 'none' ) ax.add_patch(box) ax.text(x + width/ 2 , y + height/ 2 , text, ha= 'center' , va= 'center' , fontsize= 10 , color=text_color, fontweight= 'bold' ) def add_arrow ( ax, start, end, color= '#333333' ): """添加箭头""" arrow = FancyArrowPatch(start, end, arrowstyle= '-|>' , mutation_scale= 15 , color=color, linewidth= 2 ) ax.add_patch(arrow) # 使用示例 fig, ax = create_graphical_abstract() add_box(ax, 0.5 , 2 , 2 , 1 , 'Input\nData' , '#E74C3C' ) add_arrow(ax, ( 2.7 , 2.5 ), ( 3.3 , 2.5 )) add_box(ax, 3.5 , 2 , 2 , 1 , 'Model' , '#3498DB' ) add_arrow(ax, ( 5.7 , 2.5 ), ( 6.3 , 2.5 )) add_box(ax, 6.5 , 2 , 2 , 1 , 'Output' , '#2ECC71' ) plt.savefig( 'graphical_abstract.png' , bbox_inches= 'tight' , pad_inches= 0.1 ) 复杂布局模板 def create_pipeline_abstract (): """创建流水线式摘要图""" fig = plt.figure(figsize=( 10 , 5 ), dpi= 300 ) # 使用GridSpec灵活布局 gs = fig.add_gridspec( 2 , 4 , hspace= 0.3 , wspace= 0.3 ) # 顶部：主流程 ax_main = fig.add_subplot(gs[ 0 , :]) ax_main.axis( 'off' ) # 底部：细节面板 ax1 = fig.add_subplot(gs[ 1 , 0 ]) ax2 = fig.add_subplot(gs[ 1 , 1 ]) ax3 = fig.add_subplot(gs[ 1 , 2 ]) ax4 = fig.add_subplot(gs[ 1 , 3 ]) return fig, (ax_main, ax1, ax2, ax3, ax4) 工具三：Plotly + Kaleido 方案 # 安装: pip install plotly kaleido import plotly.graph_objects as go def create_plotly_abstract ( title= "Research Overview" ): """使用Plotly创建可交互摘要图，并导出为高质量静态图""" fig = go.Figure() # 添加矩形框 for i, (label, color, x) in enumerate ([ ( 'Input\nData' , '#E74C3C' , 0.1 ), ( 'Processing' , '#3498DB' , 0.4 ), ( 'Results' , '#2ECC71' , 0.7 ), ]): fig.add_shape( type = "rect" , x0=x, y0= 0.3 , x1=x+ 0.2 , y1= 0.7 , fillcolor=color, line_color= "white" , opacity= 0.9 ) fig.add_annotation(x=x+ 0.1 , y= 0.5 , text=label, showarrow= False , font= dict (color= 'white' , size= 14 )) # 添加箭头 for x in [ 0.32 , 0.62 ]: fig.add_annotation(x=x+ 0.04 , y= 0.5 , ax=x, ay= 0.5 , xref= 'paper' , yref= 'paper' , axref= 'paper' , ayref= 'paper' , arrowhead= 2 , arrowsize= 1.5 , arrowcolor= '#666' ) fig.update_layout( width= 900 , height= 450 , paper_bgcolor= 'white' , plot_bgcolor= 'white' , showlegend= False , margin= dict (l= 10 , r= 10 , t= 40 , b= 10 ), title= dict (text=title, x= 0.5 ) ) # 导出为高质量PNG（需要kaleido） fig.write_image( 'graphical_abstract.png' , scale= 2 ) # 导出为PDF（矢量） fig.write_image( 'graphical_abstract.pdf' ) # 导出为HTML（交互式） fig.write_html( 'graphical_abstract.html' ) return fig