State Diagram Render Errors unless State title ends with the character "s"

[jjregis]

Description

This State Diagram will not render unless "State GraphStore" is typed as "State GraphStores." I've encountered this once before on different State Diagram with a different word. The commonality was that they were both inside nested states. Parsing error?

`stateDiagram-v2
direction TB

%% Client-Side State Management
state Client {
    direction TB
    
    state ClientMobX {
        direction LR
        
        %% MobX Stores
        state WebSocketStore {
            isConnected
            connectionStatus
            socket
            sessionState
            connect
            disconnect
            getSocket
            setSessionState
            getSessionState
            connect_event
            disconnect_event
            error_event
        }
        
        state ChatStore {
            messages
            prompt
            isLoading
            threadId
            availableThreads
            isThreadListOpen
            agentId
            availableAgents
            isAgentListOpen
            functionCalls
            fileUploadState
            speechToTextState
            sendMessage
            createThread
            selectThread
            createAgent
            selectAgent
            setFile
            startRecording
            stopRecording
        }
        
        state GraphStore {
            nodes
            edges
            selectedNodes
            layoutSettings
            addNode
            updateNode
            addEdge
            updateEdge
            setLayout
            applyLayout
        }
    }
    
    state ClientUI {
        direction TB
        
        state ChatComponent {
            direction TB
            ChatStreamMultimodalGraphMobX
            
            state Subcomponents {
                ChatMessages
                ThreadList
                AgentList
                FunctionCallStatus
                AudioRecorder
                FileUpload
            }
        }
        
        state GraphComponent {
            direction TB
            GraphVisualization
            
            state GraphSubcomponents {
                NodeRenderer
                EdgeRenderer
                ControlPanel
            }
        }
    }
    
    WebSocketStore --> ChatStore: Provides events
    WebSocketStore --> GraphStore: Updates data
    ChatStore --> ClientUI: Updates Chat UI
    GraphStore --> ClientUI: Updates Graph UI
    ClientUI --> WebSocketStore: Triggers events
}

%% Server-Side State Management
state Server {
    direction TB
    
    state SocketServer {
        handleConnection
        setupEventHandlers
        disconnectHandler
    }
    
    state SessionManager {
        direction LR
        
        state SessionState {
            initState
            clearState
            updateState
            getFullState
        }
        
        state EventHandlers {
            sessionInit
            sessionClear
            sessionUpdate
            sessionGet
        }
        
        state ResponseEvents {
            sessionReady
        }
    }
    
    state FeatureHandlers {
        direction LR
        
        state ChatHandler {
            agentCreate
            agentList
            threadCreate
            threadList
            chatMessage
        }
        
        state FileHandler {
            fileUpload
            fileProcess
        }
        
        state AudioHandler {
            audioRecord
            audioTranscribe
        }
        
        state GraphHandler {
            graphUpdate
            graphLayout
            graphQuery
        }
    }
}

%% WebSocket Communication
state WebSocketEvents {
    direction TB
    
    state ClientToServer {
        emitEvents
        promiseHandling
        eventTimeouts
    }
    
    state ServerToClient {
        responseEvents
        errorEvents
        streamEvents
    }
}

%% External Services
state ExternalServices {
    LLM_API
    FileProcessing
    SpeechToText
    GraphAnalytics
}

%% Relationships between major components
Client --> WebSocketEvents
WebSocketEvents --> Server
Server --> ExternalServices: API Calls
ExternalServices --> Server: Responses
Server --> WebSocketEvents: Events
WebSocketEvents --> Client: Updates

%% State Synchronization Flow
state StateSyncFlow {
    direction LR
    Init --> Update: sessionInit
    Update --> Get: sessionUpdate
    Get --> Clear: sessionGet
    Clear --> Init: sessionClear
}

Server --> StateSyncFlow: Manages
StateSyncFlow --> Client: Synchronizes

`

Steps to reproduce

cut and paste the provided markdown into the Editor

Screenshots

No response

Code Sample

stateDiagram-v2
    direction TB
    
    %% Client-Side State Management
    state Client {
        direction TB
        
        state ClientMobX {
            direction LR
            
            %% MobX Stores
            state WebSocketStore {
                isConnected
                connectionStatus
                socket
                sessionState
                connect
                disconnect
                getSocket
                setSessionState
                getSessionState
                connect_event
                disconnect_event
                error_event
            }
            
            state ChatStore {
                messages
                prompt
                isLoading
                threadId
                availableThreads
                isThreadListOpen
                agentId
                availableAgents
                isAgentListOpen
                functionCalls
                fileUploadState
                speechToTextState
                sendMessage
                createThread
                selectThread
                createAgent
                selectAgent
                setFile
                startRecording
                stopRecording
            }
            
            state GraphStore {
                nodes
                edges
                selectedNodes
                layoutSettings
                addNode
                updateNode
                addEdge
                updateEdge
                setLayout
                applyLayout
            }
        }
        
        state ClientUI {
            direction TB
            
            state ChatComponent {
                direction TB
                ChatStreamMultimodalGraphMobX
                
                state Subcomponents {
                    ChatMessages
                    ThreadList
                    AgentList
                    FunctionCallStatus
                    AudioRecorder
                    FileUpload
                }
            }
            
            state GraphComponent {
                direction TB
                GraphVisualization
                
                state GraphSubcomponents {
                    NodeRenderer
                    EdgeRenderer
                    ControlPanel
                }
            }
        }
        
        WebSocketStore --> ChatStore: Provides events
        WebSocketStore --> GraphStore: Updates data
        ChatStore --> ClientUI: Updates Chat UI
        GraphStore --> ClientUI: Updates Graph UI
        ClientUI --> WebSocketStore: Triggers events
    }
    
    %% Server-Side State Management
    state Server {
        direction TB
        
        state SocketServer {
            handleConnection
            setupEventHandlers
            disconnectHandler
        }
        
        state SessionManager {
            direction LR
            
            state SessionState {
                initState
                clearState
                updateState
                getFullState
            }
            
            state EventHandlers {
                sessionInit
                sessionClear
                sessionUpdate
                sessionGet
            }
            
            state ResponseEvents {
                sessionReady
            }
        }
        
        state FeatureHandlers {
            direction LR
            
            state ChatHandler {
                agentCreate
                agentList
                threadCreate
                threadList
                chatMessage
            }
            
            state FileHandler {
                fileUpload
                fileProcess
            }
            
            state AudioHandler {
                audioRecord
                audioTranscribe
            }
            
            state GraphHandler {
                graphUpdate
                graphLayout
                graphQuery
            }
        }
    }
    
    %% WebSocket Communication
    state WebSocketEvents {
        direction TB
        
        state ClientToServer {
            emitEvents
            promiseHandling
            eventTimeouts
        }
        
        state ServerToClient {
            responseEvents
            errorEvents
            streamEvents
        }
    }
    
    %% External Services
    state ExternalServices {
        LLM_API
        FileProcessing
        SpeechToText
        GraphAnalytics
    }
    
    %% Relationships between major components
    Client --> WebSocketEvents
    WebSocketEvents --> Server
    Server --> ExternalServices: API Calls
    ExternalServices --> Server: Responses
    Server --> WebSocketEvents: Events
    WebSocketEvents --> Client: Updates
    
    %% State Synchronization Flow
    state StateSyncFlow {
        direction LR
        Init --> Update: sessionInit
        Update --> Get: sessionUpdate
        Get --> Clear: sessionGet
        Clear --> Init: sessionClear
    }
    
    Server --> StateSyncFlow: Manages
    StateSyncFlow --> Client: Synchronizes

Setup

• Mermaid version: lates via browser
• Browser and Version: [Chrome]

Suggested Solutions

Change the world "GraphStore" to "GraphStores"

Additional Context

Again, ran into this same issue with an entirely different word in the same kind of nested structure.

[BambioGaming]

Hello @jjregis,

I've tested this issue further and found that the problem is not limited to GraphStore—other states also seem to be affected in a similar way. When placed inside a nested state, some state names cause Mermaid.js to fail to render the diagram. Interestingly, renaming the state or adding the letter 's' (e.g., GraphStores instead of GraphStore) appears to fix the issue.

Possible Causes

1. Nested States Handling Bug

• It looks like Mermaid.js might have trouble properly handling states that are deeply nested inside other states.
• The issue does not seem to occur when the state is moved outside of the nested hierarchy.

2. Syntax Parsing Issue

• Some state names, particularly GraphStore, may be misinterpreted due to conflicts with Mermaid.js' internal syntax.
• This could explain why adding an 's' resolves the issue, as it changes how the parser treats the state.

Current Workaround

• Rename the state (e.g., GraphStore → GraphModule or MyGraphStore).
• Add an 's' to the state name (e.g., GraphStore → GraphStores).
• Move the state out of the nested structure, though this is not always feasible.

I'll try to investigate this issue further.